我被这个CORS问题困住了,即使我用适当的头设置了服务器(nginx/node.js)。

我可以看到在Chrome网络窗格->响应头:

Access-Control-Allow-Origin:http://localhost

这应该能奏效。

下面是我现在用来测试的代码:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

我得到

XMLHttpRequest无法加载http://stackoverflow.com/。Access-Control-Allow-Origin不允许Origin http://localhost。

我怀疑这是客户端脚本的问题,而不是服务器配置…


当前回答

Chrome确实允许本地主机上的CORS,我让它与AWS API网关/lambda一起工作。在发送http请求时,查看开发人员工具中的network选项卡非常有用。我的问题是我的lambda函数没有处理preflight OPTIONS请求,只有POST和GET。我通过接受OPTIONS请求解决了这个问题,并确保从我的API返回以下头:

Access-Control-Allow-Origin: '*'(或网站域名) Access-Control-Allow-Methods: 'POST, GET, OPTIONS' 这是飞行前的响应,告诉chrome,我们现在可以发送一个POST/GET请求 Access-Control-Allow-Headers:“内容类型” 不确定这是否是必要的,但它告诉chrome,请求可以包括一个内容类型头

需要注意的重要一点是浏览器会发送两组报头。

OPTIONS头文件,包括 access-control-request-method: 'POST'(或任何你正在请求的http方法) 来源:“http://localhost:3000”(网站域名) 推荐人:“http://localhost:3000/”(我相信这是完整的网站路径) sec-fetch-mode:“歌珥” sec-fetch-site:“跨站点”

如果请求1的响应是200码,并且响应头包含: 'access-control-allow-methods': 'POST'(或者请求中的access-control-request-method),

实际请求,例如:POST头,其中包括 内容类型:“application / json” 产地:同上 推荐人:同上

还有更多的标题,但我认为这些是最重要的。

其他回答

同意!应该在服务器端启用CORS以彻底解决问题。然而……

对我来说,情况是:

我非常想用客户端提供的REST API在本地测试我的前端(React/Angular/VUE)代码,而不能访问服务器配置。

只是为了测试

在尝试了上面所有的步骤都没有工作后,我被迫在chrome上禁用网络安全和站点隔离试验,并指定用户数据目录(尝试跳过这个,没有工作)。

对于Windows

cd C:\Program Files\Google\Chrome\Application

禁用web安全和站点隔离试验

chrome.exe  --disable-site-isolation-trials --disable-web-security --user-data-dir="PATH_TO_PROJECT_DIRECTORY"

这终于起作用了!希望这能有所帮助!

Chrome不支持CORS请求的本地主机(2010年开放的bug, 2014年标记为WontFix)。

要解决这个问题,可以使用localho这样的域。St(和localhost一样指向127.0.0.1)或者在启动chrome时使用——disable-web-security标志(假设你只是在测试)。

我想我的解决办法可能是最简单的。在我的开发机器上,我在hosts文件中添加了一个类似于http://myfakedomain.notarealtld的假域,并将其设置为127.0.0.1。然后我更改了服务器的CORS配置(在我的例子中是S3桶)以允许该域。这样我就可以在localhost上使用Chrome,它工作得很好。

确保您的CORS配置考虑到整个主机名与端口,即。http://myfakedomain.notarealtld:3000

您可以轻松地在Linux、Mac和Windows上修改主机文件。

这些扩展都不适合我,所以我安装了一个简单的本地代理。在我的情况下https://www.npmjs.com/package/local-cors-proxy 这是一个2分钟的设置:

(来自他们的网站)

NPM install -g local-cors-proxy API端点,我们想请求有CORS问题: https://www.yourdomain.ie/movies/list 启动代理:lcp——proxyUrl https://www.yourdomain.ie 然后在客户端代码中,添加新的API端点: http://localhost:8010/proxy/movies/list

这对我来说很有吸引力:你的应用程序调用代理,代理调用服务器。零CORS问题。

我决定不碰报头,而是在服务器端进行重定向,这就像一个魅力。

下面的例子是针对Angular的当前版本(目前是9),也可能是其他使用webpacks DevServer的框架。但我认为同样的原则也适用于其他后端。

所以我在proxy.conf.json文件中使用以下配置:

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

在Angular I中,使用这样的配置:

$ ng serve -o --proxy-config=proxy.conf.json

我更喜欢在serve命令中使用代理,但你也可以把这个配置放在angular中。Json是这样的:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

参见:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy