在 OPTIONS 响应后使 fetch API 与 CORS 一起工作答案

【问题标题】：Making fetch API work with CORS after OPTIONS response在 OPTIONS 响应后使 fetch API 与 CORS 一起工作
【发布时间】：2017-10-01 06:41:32
【问题描述】：

我正在尝试从我们的 API 获取数据。 API 已启用 CORS 支持并返回以下响应 OPTIONS 请求：

Access-Control-Request-Headers:content-type  
Access-Control-Allow-Origin:*

API 不允许 'Content-type' 除了'application/json' 之外的任何内容。

利用这个限制，我尝试使用 React-Native 的fetch 方法来获取数据。

方法 1（无关联）：

{
    method: 'POST',
    mode: "no-cors",
    headers: {
       'content-type': 'application/json'
}

使用此方法，浏览器会自动将内容类型发送为“文本/纯文本”。我认为这是因为 CORS 默认只允许三个标头之一。但是，由于服务器不支持这种内容类型，它会返回一个不支持的内容类型的错误。

方法2（有或无）：

{ 
    method: 'POST',
    mode: "cors", // or without this line
    redirect: 'follow',
    headers: {
        'content-type': 'application/json'
    }
}   
...   
.then(response => console.log(response))

在这种情况下，使用 Chrome 的 F12 网络工具，我可以看到服务器返回数据：对服务器的第一个请求是 fetch 为 OPTIONS。对此，服务器回复一个空对象以及上述标头集。下一个调用是实际的 POST API 调用，服务器使用包含一些数据的正确 JSON 响应来响应该调用。但是，通过我的代码在控制台上得到的响应是{}。我认为这是因为 react 的 fetch API 正在返回 OPTIONS 调用的响应，而不是实际的 POST 调用。

有什么方法可以忽略OPTIONS请求的响应，获取then方法处理后续请求的响应？

【问题讨论】：

标签： javascript reactjs react-native cors fetch-api

【解决方案1】：

您遇到的直接问题是，您当前编写的代码期望响应为 JSON，但响应实际上是您需要处理以获取 JSON 的 Promise。

所以你需要做这样的事情：

fetch("https://example.com")
    .then(response => response.json())
    .then(jsondata => console.log(jsondata))

【讨论】：