我被这个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。
我怀疑这是客户端脚本的问题，而不是服务器配置…
当前回答
我决定不碰报头，而是在服务器端进行重定向，这就像一个魅力。
下面的例子是针对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
其他回答
我决定不碰报头，而是在服务器端进行重定向，这就像一个魅力。
下面的例子是针对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
Chrome不支持CORS请求的本地主机(2010年开放的bug, 2014年标记为WontFix)。
要解决这个问题，可以使用localho这样的域。St(和localhost一样指向127.0.0.1)或者在启动chrome时使用——disable-web-security标志(假设你只是在测试)。
同意!应该在服务器端启用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的块，例如:
Access Control-Allow-Origin - Unblock (https://add0n.com/access-control.html?version=0.1.5&type=install)。
这些扩展都不适合我，所以我安装了一个简单的本地代理。在我的情况下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问题。
