fetch POST 返回 HTTP 415，而 curl 继续正常并返回结果答案

【问题标题】：fetch POST is returning HTTP 415, while curl goes on fine and returns resultfetch POST 返回 HTTP 415，而 curl 继续正常并返回结果
【发布时间】：2017-10-26 19:48:56
【问题描述】：

这就是我的代码的样子

let body = {
            authCode: "XXXX",
            clientId: "YYYYYY",
            clientSecret: "ZZZZZZ"
        };


        fetch('https://api.myapp.com/oauth/token',{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            mode: 'no-cors',
            body: body
        }).then(function(response){
            console.log("response: ", response);
        }).catch(function(error){
            console.log("could not get tokens: ", error);
        })

在 Chrome 中，这就是我所看到的

我试图通过curl command 做到这一点，这就是它的样子

➜  ~ curl -X POST -H "Content-Type: application/json" -d '{
  "authCode": "XXXX",
  "clientId": "YYYYY",
  "clientSecret": "ZZZZZZZZ"
}' https://api.myapp.com/oauth/token
{"authToken":"e141kjhkwr3432ca9b3d2128385ad91db4cd2:cca6b151-cab4-4de2-81db-9a739a62ae88:23000000"}

我在这里做错了什么？

更新

改成关注后，结果还是HTTP 415

fetch('https://api.myapp.com/oauth/token',{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            mode: 'no-cors',
            body: JSON.stringify(body)
        }).then(function(response){
            console.log("response: ", response);
        }).catch(function(error){
            console.log("could not get tokens: ", error);
        })

有趣的是，我意识到我发送了标题"Content-Type": "application/json"，而我返回的是content-type: text/plain，为什么会发生这种情况？

【问题讨论】：

你了解mode: 'no-cors' 的作用吗？不是说这是你的问题（问题很可能出在服务器端，我的意思是，为什么它以 415 响应，客户端代码无法真正帮助解决这个问题） - 但mode: no-cors 将意味着你的代码将永远无法访问响应
JSON.stringify(body) ?
进一步@karthick 评论 - body: Any body that you want to add to your request: this can be a Blob, BufferSource, FormData, URLSearchParams, or USVString object. - 一个对象不是这些
谢谢，看看我的更新

标签： javascript reactjs curl fetch fetch-api

【解决方案1】：

您必须像这样定义 Accept 和 Content-Type 标头并字符串化您的数据对象

const params = {
            headers: {
                'Accept': "application/json, text/plain, */*",
                'Content-Type': "application/json;charset=utf-8"
            },
            body: JSON.stringify(yourObject),
            method: "POST"
        };

fetch(url, params)
        .then(data => { console.log('data', data)})
        .then(res => { console.log('res', res) })
        .catch(error => { console.log('error', error) });

【讨论】：

为什么它是必须的？

【解决方案2】：

fetch() 不期望在 body 处有 JavaScript 对象。 curl 命令和fetch() 模式不一样。使用body: JSON.stringify(<javascript plain object>)。

Request

注意：body 类型只能是Blob、BufferSource、FormData、 URLSearchParams, USVString 或 ReadableStream 类型，所以用于添加一个JSON 对象到您需要对该对象进行字符串化的有效负载。

请参阅Fetch with ReadableStream 以了解将ReadableStream 设置为body 的值的实施状态。

【讨论】：

谢谢，看看我的更新。响应还是一样
@daydreamer 为什么设置headers: { "Content-Type": "application/json", "Accept": "application/json" }, mode: 'no-cors' 标头？预期的反应是什么？
JSON 中的预期响应 js。 'no-cors' 因为预检请求否则会失败
@daydreamer 响应未设置 CORS 标头。你为什么期待JSON 回复？
如果我没有设置no-cors，fetch() 会失败。