CORS 正在阻止带有凭据的请求 [关闭]答案

【问题标题】：CORS is blocking requests withCredentials [closed]CORS 正在阻止带有凭据的请求 [关闭]
【发布时间】：2020-03-24 03:44:04
【问题描述】：

我是 Node 和 Angular 的新手。发送请求 withCredentials: true 选项时，我遇到了 Cors 的问题。当我发送这样的请求时，我得到了：

响应中“Access-Control-Allow-Origin”标头的值当请求的凭证模式为 '包括'。`。

在没有此选项的情况下发送请求时，我没有收到任何错误。 Angular 正在开发 http://localhost:4200，而 Nodejs 正在开发 http://localhost:1234。 cors 模块似乎无法正常工作。

在 NodeJs 服务器中我使用cors 模块：

const cors = require('cors');

const corsOptions = {
  origin: 'http://localhost:4200',
  optionsSuccessStatus: 200,
  credentials: true
};

app.use(cors(corsOptions));

服务器上的req.headers：

{ host: 'localhost:1234',
  connection: 'keep-alive',
  'content-length': '44',
  accept: 'application/json, text/plain, */*',
  origin: 'http://localhost:4200',
  'user-agent':
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36',
  'content-type': 'application/json',
  'sec-fetch-site': 'same-site',
  'sec-fetch-mode': 'cors',
  referer: 'http://localhost:4200/login',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7' }

编辑：似乎在私人模式下运行浏览器这样简单的事情解决了这个问题......

【问题讨论】：

您可以尝试将您的来源 (localhost) 添加到 Access-Control-Allow-Origin。
您可以在短时间内禁用 CORS 并尝试此命令 "chrome --disable-web-security --disable-site-isolation-trials --user-data-dir=c:\chromeSession " 使用 cmd 或 Cntr+R 运行，这只是为了交叉检查
我会改用代理。

标签： node.js angular cors

【解决方案1】：

你可以试试这样设置标题：

app.use(function (req, res, next) {

    // UI port you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    ...
}

用户界面：

this.http.get(url, { withCredentials: true })

当我们将凭证传递给后端服务时，必须指定 url 端口。

【讨论】：

谢谢，不幸的是，这并没有什么区别。错误是一样的。
你是从 UI 传递 { withCredentials: true } 吗？
是的，当错误出现时，我正在传递 { withCredentials: true }，没有 { withCredentials: true } 它工作正常。
嗯.. 抱歉帮不上忙。我在.net中实现了这个，注意节点:(

【解决方案2】：

我遇到了同样的问题，不是这个模块，而是在开发模式下并使用另一台服务器时发送凭据。我认为问题可能出在不安全的连接中（http 而不是https），当然，localhost 总是不安全的。

我使用代理 (proxy.conf.json) 为我解决了这个问题，将 url 重新路由到预期的 url，使浏览器在开发时认为它是同一个来源。（此处描述：ANGULAR BUILD GUIDE）

{
  "/api": {
    "target": "http://THE_OTHER_URL/WITH/PATH/",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

并将其包含在该项目的构建选项下的angular.json 中：

... 
"projects" : {
    "YOUR_PROJECT_NAME" : {
        ...
        "architect": {
            ...
            "serve": {
                "builder": "@angular-devkit/build-angular:dev-server",
                "options": {
                    "proxyConfig" : "proxy.conf.json",
                    "browserTarget": "YOUR_PROJECT_NAME:build"
                }
            }
        },
       ...
    }
}

我不确定这是否也能解决您的问题，但也许值得一试。

【讨论】：

【解决方案3】：

在 Node.js 中启用跨域资源共享 (CORS)。 CORS 本质上意味着跨域请求。

只需使用这行代码在响应中设置标头即可启用 CORS。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
});

【讨论】：