javascript - 如何在 POST 请求中调试 net::err_failed/415 Unsupported Media Type 错误？

Question

我们有一个我正在尝试在 Vue 应用程序中使用的 API（由我们团队的后端开发人员制作）。以前我已经通过HTTP 客户端GET成功地向 API 发出了一些请求，所以我预计不会因为框架本身而出现问题。我正在尝试以下操作：axios

const data = JSON.stringify(someObject);
axios.post(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, data)

返回得到 415 Unsupported Media Type 响应。好的，请求标头包含

Accept: application/json, text/plain, */*
Content-Type: application/x-www-form-urlencoded

POST而为那个API大摇大摆地展示

有道理，我试图将请求更改为

axios.post(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, data, {
    headers: {
        'Content-Type': 'application/json-patch+json',
    },
})

但这给我带来了（Vivaldi）开发工具中的“（失败）”，而不是 HTTP 请求代码和“（失败）net::ERR_FAILED”。好吧，Chrome 开发工具显示 axios 实际上发送OPTIONS请求而不是POST！这是为什么？（不过，Vivaldi 控制台说POST请求失败）。该请求是跨域的（从本地主机到远程服务器），并且这个（与没有标头设置的请求不同）也会在控制台中导致此错误：

从源“ http://localhost:8081 ”访问“[我的 API 路径]/examination/conclusion”处的 XMLHttpRequest已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP好的状态。

如果这是一个 CORS 问题，为什么我得到 415 没有这些标题并且没有 CORS 投诉？是吗？我怎样才能解决这个问题？为什么 axios 发送OPTIONS请求而不是POST？或者它没有，这是 Chrome 开发工具的一个怪癖？这太不一致了，不知道从哪里继续..

我发现了一个类似的问题，但没有收到任何答案..

PSs

1. 好的，在 FireFox 中，第二个请求也显示为发送一个OPTIONS请求，然后得到 404 响应，控制台显示CORSPreflightDidNotSucceed和CORSDidNotSucceed错误。我已经问过我们的后端开发人员，他们认为整个应用程序都启用了 CORS，所以这似乎更有可能是 axios 的问题。

2. 几个可能相关的 axios问题：2345、2083

3. 嗯，看起来 axios 不需要对此做任何事情。

   fetch(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, {
       method: 'POST',
       body: data
   })
   

   给出相同的 415 响应，

   fetch(process.env.VUE_APP_DEV_API_ENDPOINT + `/examination/conclusion`, {
       method: 'POST',
       headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
       },
       body: data
   })
   

   给出相同的(failed) net::ERR_FAILED结果

4. 看起来这回答了大部分“为什么？” 问题，但不是“如何解决？” 一

5. 这看起来与“如何修复？”更相关。方面（我已经向我们的后端开发人员展示了它，我们会看看它是否有帮助）

标签： javascriptajaxhttp