当http:// localhost是起源时的致命CORS

2020/10/19 00:01 · javascript ·  · 0评论

即使我为服务器(nginx / node.js)设置了适当的标头,我仍然会遇到CORS问题。

我可以在“ 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不允许使用原始http:// localhost

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

Chrome不支持CORS请求的本地主机(该错误于2010年打开,于2014年标记为WontFix)。

为了解决这个问题,您可以使用一个类似的域lvh.me(就像localhost一样指向127.0.0.1),或者使用--disable-web-securityflag开头chrome (假设您只是在测试)。

根据@Beau的回答,Chrome不支持localhost 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过滤器仅过滤localhost URL

*://localhost:*/*

真正的问题是,如果我们-Allow-为所有请求(OPTIONSPOST)设置,Chrome将取消它。以下代码对我适用于POSTChrome的LocalHost

<?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可以localhost很好地通过来源向CORS发出请求Chrome没问题。

无法加载的原因http://stackoverflow.comAccess-Control-Allow-Origin标头不允许您输入localhost源。

快速而肮脏的Chrome扩展程序修复:

Moesif Orign和CORS Changer

但是,Chrome确实支持来自本地主机的跨域请求。请务必添加一个报头Access-Control-Allow-Originlocalhost

这些扩展都不适合我,因此我安装了一个简单的本地代理。就我而言,https://www.npmjs.com/package/local-cors-proxy
这是2分钟的设置:

(来自他们的网站)

npm install -g local-cors-proxy

我们要请求的具有CORS问题的API端点:
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的情况下,我使用该配置:

$ 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的限制,例如:

访问控制-允许-取消阻止(https://add0n.com/access-control.html?version=0.1.5&type=install)。

本文地址:http://javascript.askforanswer.com/danghttp-localhostshiqiyuanshidezhimingcors.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!