Fetch: Content-Type: application/json 在 post 方法中没有改变。模式设置为 cors答案

【问题标题】：Fetch: Content-Type: application/json not changing in post method. Mode set to corsFetch: Content-Type: application/json 在 post 方法中没有改变。模式设置为 cors
【发布时间】：2022-01-20 07:58:40
【问题描述】：

我是使用 fetch 函数的新手，不知道为什么这个 fetch 函数不会更改标题。具体来说，我似乎无法将内容类型更改为 json，从而使 API 返回 415。我尝试将模式设置为“cors”和“no-cors”，但似乎两者都没有区别。

const fetchOptions: RequestInit = {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
}
await fetch("https://localhost:44375/api/users/login", fetchOptions)
.then(response => {
    console.log(response);
})

这是我的 Chrome 控制台图片的链接：

如您所见，它是内容类型的纯文本，同时也处于 cors 模式。

【问题讨论】：

还应该有一个飞行前OPTIONS请求。那处理得当吗？我无法重现此问题。即使发布到虚假 URL，内容类型也设置正确
这似乎是个问题。看起来我的服务器没有正确处理这个问题，所以现在我要弄清楚我的服务器应该对该选项请求执行什么操作。谢谢！
不要尝试手动处理 CORS 飞行前请求和标头。无论您使用什么服务器端堆栈，我都保证有一个成熟、强大、预制的 CORS 中间件可用
我从您的帖子中修复了它。就像我在服务器端添加允许内容类型标头的 cors 策略一样简单。

标签： javascript typescript api fetch-api

【解决方案1】：

这里的问题是服务器端而不是客户端。由于来自浏览器的飞行前 OPTIONS 请求，我的 web api 不允许更改 Content-Type 标头。通过在服务器端正确设置 cors 策略已解决此问题。

在我的例子中，我正在编写一个 C# api，它就像在我的策略中添加 WithHeaders 一样简单：

builder.Services.AddCors(options => options.AddPolicy(name: "DevOrigins",
    builder =>
    {
        builder.WithOrigins("http://localhost:3000");
        builder.WithHeaders("Content-Type");
    })
);

【讨论】：