CORS - Angular 和 Express 的 http OPTIONS 错误

Posted 2023-03-04

【中文标题】CORS - Angular 和 Express 的 http OPTIONS 错误

【英文标题】：CORS - http OPTIONS error with Angular and Express

【发布时间】：2015-12-17 11:13:03

【问题描述】：

我正在尝试从 Angularjs 客户端对我的 API 进行 POST，我在另一个域中运行的服务器上有此配置：

app.use(function(req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, DETELE');
  res.setHeader('Access-Control-Allow-Headers', '*');
  next();
);

发送到服务器的标头是：

OPTIONS /api/authenticate HTTP/1.1
Host: xxxx.herokuapp.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://127.0.0.1:5757
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://127.0.0.1:5757/login
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en,es;q=0.8,gl;q=0.6,pt;q=0.4

响应头是：

HTTP/1.1 403 Forbidden
Server: Cowboy
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DETELE
Access-Control-Allow-Headers: X-Requested-With,content-type,Authorization
Content-Type: application/json; charset=utf-8
Content-Length: 47
Etag: W/"2f-5f255986"
Date: Sun, 20 Sep 2015 19:26:56 GMT
Via: 1.1 vegur

我在 Chrome 控制台中得到的是：

angular.js:9814 OPTIONS http://xxxxx.herokuapp.com/api/authenticate 
XMLHttpRequest cannot load http://xxxx.herokuapp.com/api/authenticate. Response for preflight has invalid HTTP status code 403

【问题讨论】：

您是否尝试过将 cors 配置放在最开始（在 bodyParsing、路由器、methodOverride 等之前）？看看这里：***.com/questions/11001817/…希望它有帮助

【参考方案1】：

事实上大多数浏览器出于安全原则不允许客户端 js 代码从同一主机请求资源。

但是，当资源所有者通过添加跨域资源共享标头作为响应来告诉客户端浏览器他的共享资源时，这是允许的。

不要猜测标题使用 cors 包 - 它会为你做所有肮脏的工作。

npm install cors --save

然后：

var express = require('express')
  , cors = require('cors')
  , app = express();

app.use(cors());

就是这样:)

其他文档：https://www.npmjs.com/package/cors

【讨论】：

你能解释一下我做错了什么以及为什么会这样吗？

cors 模块和你一样，但是你没有定义大部分规则。你可以在这里阅读：github.com/expressjs/cors/blob/master/lib/index.js

或检查：打开 chrome 并调查 cors 模块发送的标头并将相同的标头写入您的代码并删除 cors 模块。

这个答案根本没有帮助。顺便说一句，-试试这个：npm install cors --save ... cors = require('cors') - 你是认真的吗？

我的例子是常见的基本解决方案。快速（脏）解决方案。这取决于你的问题是什么。

【参考方案2】：

我明白了，这个话题有点老了，但我在你的ACCESS-CONTROL-ALLOW-METHODS 中发现了一个小错字。

只是想与其他在复制和粘贴时遇到类似问题的用户分享：

Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DETELE

DELETE 中有错字。