我被这个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。

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


当前回答

根据@Beau的回答,Chrome不支持本地主机CORS请求,在这个方向上不太可能有任何变化。

我使用Allow-Control-Allow-Origin: * Chrome扩展来解决这个问题。扩展将为CORS添加必要的HTTP头:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

源代码发布在Github上。

注意,默认情况下扩展过滤所有url。这可能会破坏一些网站(例如:Dropbox)。我将其更改为仅使用以下URL过滤器过滤本地主机URL

*://localhost:*/*

其他回答

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

下面的例子是针对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

根据@Beau的回答,Chrome不支持本地主机CORS请求,在这个方向上不太可能有任何变化。

我使用Allow-Control-Allow-Origin: * Chrome扩展来解决这个问题。扩展将为CORS添加必要的HTTP头:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

源代码发布在Github上。

注意,默认情况下扩展过滤所有url。这可能会破坏一些网站(例如:Dropbox)。我将其更改为仅使用以下URL过滤器过滤本地主机URL

*://localhost:*/*

真正的问题是,如果我们设置-允许-所有请求(OPTIONS & POST), Chrome将取消它。 下面的代码为我POST到LocalHost与Chrome

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>

解决方案是安装一个扩展,以提升Chrome的块,例如:

Access Control-Allow-Origin - Unblock (https://add0n.com/access-control.html?version=0.1.5&type=install)。

同意!应该在服务器端启用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"

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