如何解决响应中 'Access-Control-Allow-Credentials' header 的 CORS 策略错误？

Question

当我尝试在本地登录网站时遇到以下错误。 UI 是使用 Angular 和 Type Script 构建的。相同的代码在 DEV Server 中运行良好，并且登录没有问题。你能帮忙解决这个问题吗？

Access to XMLHttpRequest at 'https://exchange-dev.xyz.com/accounts/session/env' from origin 'http://local-qa.xyz.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

这是 Chrome 网络选项卡：

Request URL: https://exchange-dev.xyz.com/accounts/session/env
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://local-qa.xyz.com
Connection: keep-alive
Content-Length: 47
Content-Type: application/json
Date: Tue, 04 May 2021 21:00:28 GMT
Server: nginx/1.14.0 (Ubuntu)
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: exchange-dev.xyz.com
Origin: http://local-qa.xyz.com
Referer: http://local-qa.xyz.com/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

这是我的 environment.ts 文件，它指向 DEV API 服务器位置

export const environment = {
  production: false,
  API_URL: () => 'https://exchange-dev.xyz.com/',
  ITEMS_PER_PAGE: 25

Answer 1

这是一个与服务器安全相关的问题。我可以通过安装本地证书来解决问题。服务器 https://exchange-dev.xyz.com 是运行安全环境，当我从本地计算机调用时，它无法将 cookie 从本地 Angular UI 传递到服务器 API .按照命令，我曾经在本地安装证书，然后启用 chrome“允许从本地主机加载的资源使用无效证书。”转到 Chrome flags : chrome://flags/ 最后它解决了所有安全和 CORS 相关问题。

ng serve --ssl --port 80 --disable-host-check

如何解决响应中 'Access-Control-Allow-Credentials' header 的 CORS 策略错误？

How to resolve CORS policy Error with 'Access-Control-Allow-Credentials' header in the response?

security

access-control

cors

angular