如何修复XMLHttpRequest因CORS策略而被阻止的问题

Question

最初的回答：

当我使用NodeJS服务器REST API连接数据库（MongoDB）时，我的Angular登录组件出现了问题。

以下是我的Node.js文件（app.js）中的代码：

XMLHttpRequest访问 'http://localhost:3000/users/login' 时，发生了CORS策略阻止。请求来源'http://localhost:4200'，响应头中'Access-Control-Allow-Credentials'的值为'Content-Type'，该值必须为'true'，当请求凭据模式为“包含”时。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

注：CORS是一种浏览器安全机制，防止网站从其他来源获取或发送数据。在此情境下，错误是由于服务器未正确设置CORS标头所致。

var cors = require ('cors');
app.use(cors({
    origin:['http://localhost:4200','http://127.0.0.1:4200'],
    credentials:true
}));

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

  res.header('Access-Control-Allow-Origin', "http://localhost:4200");
  res.header('Access-Control-Allow-Headers', true);
  res.header('Access-Control-Allow-Credentials', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  next();
});

这是git日志结果：https://prnt.sc/o38w12。此外，当我提交时，注册功能仍然可以正常工作。原始答案翻译成“最初的回答”。

- minh quan nguyen

Answer 1

凭据：配置Access-Control-Allow-Credentials CORS头。将其设置为true以传递头文件，否则将省略。不是内容类型。

你可以尝试更改

res.header('Access-Control-Allow-Credentials', 'Content-Type');

To

res.header('Access-Control-Allow-Credentials', true);

- Madhan Varadhodiyil

Answer 2

**

• 修复CORS错误

有两种方法可以解决此问题：

1. 如果您拥有后端服务器，则最好配置后端服务器以返回适当的CORS HTTP头文件。

2. Angular CLI代理是本文的重点。

**

• Angular CLI代理

**

在这里，我假设你有一个使用一些服务进行HTTP请求的Angular项目。 在src文件夹的根目录下创建名为proxy.conf.json的代理配置文件。

                "/api": {
                    "target": "http://localhost:3000",
                    "secure": false
                }
            }

2. 在architect>serve>options下配置angular.json，添加proxyConfig键，指向src/proxy.conf.json，如下所示

           "architect": {
                "serve": {
                  "builder": "@angular-devkit/build-angular:dev-server",
                  "options": {
                    "browserTarget": "your-application-name:build",
                    "proxyConfig": "src/proxy.conf.json"
                  },

**

• 现在，只需运行 ng serve 即可完成。

** 提示：您还可以使用此技巧作为安全措施，以隐藏从浏览器中显示的服务器请求。

- user14431347