axios发送post请求出现Cross-origin-request Blocked跨域错误如何处理

你当前的错误做法是在前端请求头中添加Access-Control-Allow-Origin字段，该字段属于服务端响应头，是CORS协议中要求后端网关服务在返回响应时携带的字段，前端主动添加没有任何作用，反而可能触发OPTIONS预检请求，加重跨域报错。请先删除代码中以下两行无效配置：

// 以下两行配置完全无效，请删除
const config = {
  headers: { "Access-Control-Allow-Origin": "true" },
};
axios.defaults.headers.post["Access-Control-Allow-Origin"] = "*";

方案1：修改后端网关配置（可用于生产环境） #

在你请求的http://172.16.101.250:3000对应的网关服务中添加CORS配置，核心需要返回的响应头如下：

• Access-Control-Allow-Origin：值设置为你前端站点的域名（比如本地开发可以填http://localhost:8080，测试阶段也可临时设置为*）
• Access-Control-Allow-Methods：值设置为允许的请求方法，比如POST, GET, OPTIONS
• Access-Control-Allow-Headers：值设置为允许的请求头，比如Content-Type
  同时需要配置网关对OPTIONS预检请求直接返回200状态码，不要做权限、参数等业务校验。

方案2：前端本地代理（仅适用于本地开发调试） #

如果你暂时无法修改后端配置，可通过前端框架的本地开发代理绕过跨域：

• Vue项目：在vue.config.js中配置devServer.proxy，将/api路径代理到http://172.16.101.250:3000，前端请求时改为请求/api/create即可
• React项目：在src目录下新增setupProxy.js配置代理规则，逻辑同上

public addArtikel(): void {
  this.neuArtikel.push(this.ArtikelObj);
  axios
    .post("http://172.16.101.250:3000/create", this.ArtikelObj)
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.log(error);
    });
}

内容的提问来源于stack exchange，提问作者Amine Aamer