跨域请求带凭证时如何设置Content-Type？调试时类型不符问题排查

这种情况通常和跨域请求的预检机制、前后端的CORS配置细节有关，我帮你拆解下可能遗漏的点：

一、先确认前端的请求配置是否正确 #

首先要确保你在发送请求时，既正确设置了Content-Type，又开启了凭证携带：

• 如果用fetch：

fetch('https://your-api-domain.com/endpoint', {
  method: 'POST',
  credentials: 'include', // 关键：开启凭证携带
  headers: {
    'Content-Type': 'application/json', // 这里替换成你需要的类型，比如application/x-www-form-urlencoded
  },
  body: JSON.stringify(yourData),
});

• 如果用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://your-api-domain.com/endpoint');
xhr.withCredentials = true; // 关键：开启凭证携带
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(yourData));

⚠️ 注意：如果你的请求体是FormData类型，浏览器会自动覆盖Content-Type为multipart/form-data，手动设置的类型会失效，这是正常行为，不是问题。

二、服务器端的CORS配置是核心问题 #

跨域带凭证的请求有几个硬性规则，一旦违反，浏览器就会自动调整请求行为（比如降级Content-Type）：

1. Access-Control-Allow-Origin不能用*
   带凭证的请求不允许通配符*，必须设置为请求的具体源（比如https://your-frontend-domain.com），否则浏览器会默认限制非简单类型的Content-Type。

2. 必须响应预检OPTIONS请求的Access-Control-Allow-Headers
   如果你的Content-Type不是以下三种「简单类型」：

   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain
     浏览器会先发送一次OPTIONS预检请求，其中会携带Access-Control-Request-Headers: Content-Type。此时服务器必须在OPTIONS响应中返回Access-Control-Allow-Headers: Content-Type（或者包含你实际使用的Content-Type值），否则浏览器会强制将Content-Type降级为允许的简单类型（比如text/plain）。

3. 必须设置Access-Control-Allow-Credentials: true
   这个头是允许跨域携带凭证的关键，你说凭证已成功发送，这个应该已经设置了，但可以再确认下。

举个Node.js/Express的正确配置示例：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com', // 具体源，不能是*
  credentials: true,
  allowedHeaders: ['Content-Type'], // 允许Content-Type头通过预检
  optionsSuccessStatus: 200,
}));

三、排查是否有中间件/代理修改了请求头 #

比如前端的webpack dev server代理、后端的Nginx反向代理，可能会悄悄修改Content-Type。你可以在浏览器的「网络面板」里：

1. 查看实际发送的请求头，确认你设置的Content-Type是否真的被带上了；
2. 查看OPTIONS预检请求的响应头，检查是否包含上述提到的几个关键CORS头。

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