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

Posted 2023-03-04

【中文标题】如何修复 XMLHttpRequest 已被 CORS 策略阻止

【英文标题】：How to fix XMLHttpRequest has been blocked by CORS policy

【发布时间】：2019-10-31 19:09:46

【问题描述】：

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

从源访问“http://localhost:3000/users/login”处的 XMLHttpRequest >“http://localhost:4200”已被 CORS 策略阻止：响应中 >“Access-Control-Allow-Credentials”标头的值为“Content-Type” ' >当请求的凭证模式为 'include' 时必须为 'true'。 XMLHttpRequest 发起的请求的 >credentials 模式由 >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 日志结果： https://prnt.sc/o38w12 此外，我提交时注册功能仍然有效

【参考方案1】：

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

你可以尝试改变吗

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

到

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

【参考方案2】：

**

修复 CORS 错误

** 有两种方法：-

如果您拥有后端服务器，最好配置 后端服务器返回适当的 CORS HTTP 标头配置

Angular CLI 代理，这是我们本文的重点。

**

Angular CLI 代理

**

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

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

使用架构师下的 proxyConfig 键配置 angular.json>serve>指向 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 即可完成。

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