Javascript 在 OPTIONS 响应后使 fetch API 与 CORS 一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43759938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making fetch API work with CORS after OPTIONS response
提问by letsc
I are trying to fetch data from our API. The API has enabled CORS support and returns the below response to the OPTIONS request:
我正在尝试从我们的 API 中获取数据。API 已启用 CORS 支持并向 OPTIONS 请求返回以下响应：
Access-Control-Request-Headers:content-type
Access-Control-Allow-Origin:*
The API doesn't allow 'Content-type'anything other than 'application/json'.
API 不允许'Content-type'除'application/json'.
Using this limitation, I am trying to use the fetchmethod of React-Native to get the data.
利用这个限制，我尝试使用fetchReact-Native的方法来获取数据。
Method 1 (no-cors):
方法1（无cors）：
{
method: 'POST',
mode: "no-cors",
headers: {
'content-type': 'application/json'
}
With this method, the browser automatically sends the content-type as 'text/plain'. I assume this is because CORS allow just one of the three headers by default. However, since the server doesn't support this content-type, it returns an error back for unsupported content type.
使用这种方法，浏览器会自动将内容类型发送为“text/plain”。我认为这是因为 CORS 默认只允许三个标头之一。但是，由于服务器不支持此内容类型，因此它会针对不受支持的内容类型返回错误。
Method 2 (with cors or with nothing):
方法2（有cors或没有）：
{
method: 'POST',
mode: "cors", // or without this line
redirect: 'follow',
headers: {
'content-type': 'application/json'
}
}
...
.then(response => console.log(response))
In this scenario, using Chrome's F12 network tool, I can see the server returning data : the first request to the server is a fetchfor OPTIONS. To this, the server replies back with an empty object along with the above headers set. The next call is the actual POST API call, to which the server responds back with a proper JSON response containing some data. However, the response which is getting on the console via my code is {}. I assume this is because the react's fetchAPI is returning back the response of the OPTIONScall instead of the actual POSTcall.
在这种情况下，使用 Chrome 的 F12 网络工具，我可以看到服务器返回数据：对服务器的第一个请求是fetchfor OPTIONS。对此，服务器回复一个空对象以及上述标头集。下一个调用是实际的 POST API 调用，服务器以包含一些数据的正确 JSON 响应响应该调用。但是，通过我的代码在控制台上获得的响应是{}. 我认为这是因为 React 的fetchAPI 正在返回OPTIONS调用的响应而不是实际POST调用。
Is there any way to ignore the response of the OPTIONS request and get the thenmethod to process the response of the subsequent request?
有什么办法可以忽略OPTIONS请求的响应，获取then处理后续请求响应的方法吗？
回答by sideshowbarker
The immediate problem you're hitting is that your code as currently written expects the response to be JSON but the response is actually a Promise that you need to handle in order to get the JSON.
您遇到的直接问题是您当前编写的代码期望响应为 JSON，但响应实际上是您需要处理以获取 JSON 的 Promise。
So you need to instead do something like this:
所以你需要做这样的事情：
fetch("https://example.com")
.then(response => response.json())
.then(jsondata => console.log(jsondata))
