反应：获取 API 使用 POST 获取 415 Unsupported Media Type
Posted
技术标签:
【中文标题】反应：获取 API 使用 POST 获取 415 Unsupported Media Type【英文标题】：React: Fetch API getting 415 Unsupported Media Type using POST 【发布时间】：2019-09-01 19:36:56 【问题描述】：我正在尝试通过使用 Fetch API 调用我自己的 API 来保存我的数据。但结果是不断回来415 Unsupported Media Type。
客户端正在使用带有 .NET Core MVC 的 React JS。 服务器端使用托管在 Windows Server 2012 上的 .NET Core Web API。
我已经尝试了网络中提供的所有解决方案，但仍然出现 415 错误。在 IIS 方面，我添加了 Content-Type 和 Accept 以接受 application/json 和 text/plain。
到目前为止，只有 GET 方法有效。 PUT、POST、DELETE 都不起作用。
下面是我在客户端的代码。
fetch('https://mywebapi.net/api/event/',
method: 'POST',
headers:
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json;charset=UTF-8'
,
mode: 'no-cors',
body: JSON.stringify(
eventId: 5,
eventName: "Event 5",
eventDescription: "Event 5 Description",
eventLocation: "Kuala Lumpur, Malaysia",
eventDateTime: "2019-03-28"
),
).then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log("Error detected: " + error))
如果我删除 mode: 'no-cors'，它将返回 500 Internal Server Error。
我尝试过使用 RestSharp 使用 .NET，它能够正常 POST，但不能在 ReactJS 中。所以我假设服务器端配置应该是正确的，但不是在客户端。
【问题讨论】：
你试过没有headers部分
@Priyamal 是的，它也返回 415。
【参考方案1】：
肯定是mode: no-cors和你服务器的cors策略结合造成的。
通过使用mode: no-cors，您可以使用的唯一标头是simple headers，也就是“CORS-safelisted request-headers”，它仅由application/x-www-form-urlencoded、multipart/form-data 或text/plain 组成。
此行为已记录在 here:
no-cors — 防止方法成为 HEAD、GET 以外的任何东西 或 POST，并且标题不是简单的 标题。如果有任何 ServiceWorkers 拦截了这些请求，他们可能不会 添加或覆盖除简单标题之外的任何标题。 此外，javascript 可能不会访问结果的任何属性 回复。这确保了 ServiceWorker 不会影响语义 Web 和防止安全和隐私问题引起的 跨域泄露数据。
所以我会：
-
从您的请求中删除
mode: no-cors
检查您的服务器允许的来源，以确保允许来自浏览器 IP 的请求（例如，如果您的 react 应用在 http://localhost:3000 上运行，请确保 http://localhost:3000 明确列为允许的来源。
【讨论】：
【参考方案2】：fetch('https://mywebapi.net/api/event/',
method: 'POST',
headers:
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json;charset=UTF-8'
,
mode: 'no-cors',
body:
"eventId": 5,
"eventName": "Event 5",
"eventDescription": "Event 5 Description",
"eventLocation": "Kuala Lumpur, Malaysia",
"eventDateTime": "2019-03-28"
,
).then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log("Error detected: " + error))
尝试不stringifying JSON 对象，因为它会将其转换为 string 您可以发送 JSON 对象本身而不将其转换为字符串。 顺便说一句，如果我们 代理 react 应用中的请求，我认为您不需要为每个 request 启用 CORS。您可以通过在 package.json 文件中添加此行来启用代理。
,
"proxy": "http://localhost:5000"
假设您的后端在 localhost 和端口 5000 上运行。
【讨论】：
如果我没记错的话，proxy 的用法仅适用于开发服务器，对吗？不，我的 Web 客户端和 Web API 都已托管在生产服务器上，并且具有有效的 URL，而不是 localhost。附带说明一下，您提供的代码在我删除 JSON. stringfy() 后会引发错误。它说Types of property 'body' are incompatible. Type ' <body value> ' is not assignable to type 'string | FormData | Blob | ArrayBufferView | ArrayBuffer | URLSearchParams | ReadableStream<Uint8Array> | null | undefined'.以上是关于反应：获取 API 使用 POST 获取 415 Unsupported Media Type的主要内容，如果未能解决你的问题，请参考以下文章
使用多部分 FormData 获取 POST 时出现 415
通过 API Gateway 从 s3 静态网站获取到 Lambda 函数，给出 415 Unsupported Media Type 错误
解决了！ - Spring boot：获取 415 不支持的媒体类型