当使用 Angular 的 $http 服务进行 PUT 或 POST 请求时，有时会看到浏览器发送一个 OPTIONS 请求而不是预期的 PUT 或 POST 请求。这可能是由于跨域请求引起的。
跨域请求和 CORS
跨域资源共享（CORS）是一个安全机制，允许浏览器从另一个域名下请求资源。当浏览器发现请求的资源与当前网页不在同一域名下时，它会向该域名下的服务器发送一个 OPTIONS 请求，以确定是否允许此跨域请求。
OPTIONS 请求是一个 HTTP 方法，用于获取目标资源所支持的通信选项。响应中包含了 Access-Control-Allow-Methods 头信息，指示允许使用的 HTTP 方法。如果响应中不包含该头信息或者允许的方法中没有 PUT 或 POST，则浏览器会拒绝发送 PUT 或 POST 请求。
解决方法
要解决这个问题，需要在服务器端添加正确的 CORS 配置。以下是一个示例 Node.js Express 应用程序的配置：
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,PUT,PATCH,POST,DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});上面的代码会将 Access-Control-Allow-Origin 头设置为 *，表示允许来自任何域名的请求。它还将 Access-Control-Allow-Methods 头设置为所有可能使用的 HTTP 方法，包括 PUT 和 POST。
在实际生产环境中，应该根据需要限制允许的来源和方法，并进行更严格的安全设置。
示例代码
以下是一个使用 Angular 的 $http 发送 PUT 请求的示例代码：
-- -------------------- ---- ------- ------- ------- ------ ---- ----------------------------------- ----- - ----- ----- ----- ---- -- - -- ------------------------ - ----------------- ---------- -- ---------------------- - -------------------- -------- ------ ------- ---
当浏览器发现此请求跨域时，它会发送一个 OPTIONS 请求以确定是否允许使用 PUT 方法。如果服务器返回正确的 CORS 配置，浏览器将发送 PUT 请求，并在响应中返回数据。
结论
Angular 的 $http 服务可以轻松地与远程 API 进行通信，但要记住在发送跨域的 PUT 或 POST 请求时可能会遇到 OPTIONS 请求问题。通过正确配置服务器的 CORS 设置，可以解决此问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25337