在 OPTIONS 响应后使 fetch API 与 CORS 一起使用

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

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

API不允许'Content-type'除了'application/json'.

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

方法1（无cors）：

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

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

方法 2（使用 cors 或不使用 cors）：

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

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

有没有办法忽略 OPTIONS 请求的响应并获取then处理后续请求的响应的方法？

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

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

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