什么是CORS-Policy？为何JavaScript Fetch API的POST请求无法使用Content-Type？

问题原因拆解 #

这个报错本质是浏览器的CORS预检机制在“把关”：

• 当你的POST请求携带了Content-Type（比如application/json这类非简单请求头）时，浏览器会先发送一个OPTIONS预检请求到目标服务器，询问是否允许这个请求头。
• 从报错信息能看出，服务器返回的Access-Control-Allow-Headers响应头里，并没有包含content-type，所以浏览器判定这个请求不符合规则，直接拦截了后续的POST请求，也就出现了你看到的ERR_FAILED和Failed to fetch错误。

解决方法分情况处理 #

情况1：你能控制目标服务器的配置

直接修改服务器的CORS配置，把Content-Type加入允许的请求头列表：

• Node.js/Express 示例：
  如果用cors中间件，配置允许的请求头：

  const cors = require('cors');
  app.use(cors({
    allowedHeaders: ['Content-Type'], // 加入Content-Type
    origin: 'http://127.0.0.1:5501' // 指定允许的前端域名，生产环境别用*
  }));
  

• Nginx 示例：
  在反向代理配置中添加响应头：

  location /api/v1/ {
    add_header Access-Control-Allow-Origin "http://127.0.0.1:5501";
    add_header Access-Control-Allow-Headers "Content-Type";
    proxy_pass http://dummy.restapiexample.com;
  }
  

  注意：还要确保服务器正确处理OPTIONS预检请求，返回200状态码。

情况2：你无法控制目标服务器（比如调用第三方API）

这种时候需要绕开浏览器的CORS限制，常用两种方式：

• 本地代理服务器：
  自己起一个简单的Node代理，前端请求代理地址，由代理转发请求到目标API（服务器之间请求不受CORS限制）。示例代码：

  const express = require('express');
  const cors = require('cors');
  const { createProxyMiddleware } = require('http-proxy-middleware');
  const app = express();
  
  app.use(cors());
  app.use('/api', createProxyMiddleware({
    target: 'http://dummy.restapiexample.com',
    changeOrigin: true,
    pathRewrite: { '^/api': '/api/v1' } // 路径重写，匹配目标API的路径
  }));
  
  app.listen(3000, () => console.log('代理服务器运行在 http://localhost:3000'));
  

  之后前端的Fetch请求地址改成http://localhost:3000/api/create即可。
• 调试临时方案：浏览器插件：
  安装CORS相关的浏览器插件（比如CORS Unblock），临时关闭浏览器的CORS校验，仅适合开发调试，绝对不能用于生产环境。

额外小技巧：尝试使用简单请求

如果目标API支持application/x-www-form-urlencoded格式的请求体，你可以把数据转换成URL编码格式，这样浏览器会判定为“简单请求”，不会触发OPTIONS预检：

async function postData() {
  const data = { name: 'test', salary: '123', age: '23' };
  // 转换成URLSearchParams
  const formData = new URLSearchParams(data);
  const response = await fetch('http://dummy.restapiexample.com/api/v1/create', {
    method: 'POST',
    body: formData // 这里不用显式设置Content-Type，浏览器会自动设置为application/x-www-form-urlencoded
  });
  const result = await response.json();
  console.log(result);
}

内容的提问来源于stack exchange，提问作者Rohit Pal