Question

当我使用NodeJS服务器REST API时，我在角度登录组件中遇到问题连接数据库（MongoDB）

从原点>'http://localhost:3000/users/login'开始对'http://localhost:4200'处XMLHttpRequest的访问已被CORS策略阻止：响应中>'Access-Control-Allow-Credentials'标头的值为“内容类型”>当请求的凭据模式为“包含”时必须为“真”。 XMLHttpRequest发起的请求的>凭据模式由> withCredentials属性控制。

这是我在nodejs文件（app.js）中的代码

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 log结果： https://prnt.sc/o38w12 此外，我提交时注册功能仍然有效

Answer 1

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

您可以尝试更改

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

收件人

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

Answer 2

**

修复CORS错误

** 有两种方法可以这样做：-

如果您拥有后端服务器，则最好配置后端服务器返回适当的CORS HTTP标头配置
Angular CLI代理，这是本文的重点。

**

Angular CLI代理

**

在这里，我假设您有一个角度项目，其中一些服务在发出HTTP请求。在src文件夹的根目录中创建名为proxy.conf.json的代理配置文件

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

在Architect> serve>选项下使用proxyConfig键配置angular.json，该选项指向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就可以了。

** 仅供参考：您也可以将此技巧作为一种安全措施，以隐藏您提出的服务器请求，使其不会显示在浏览器中。

如何修复XMLHttpRequest已被CORS策略阻止

2 个答案: