Question

我正在尝试从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'
}

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

方法2（使用cors或什么都没有）：

{ 
    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方法来处理后续请求的响应？

Answer 1

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

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

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

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

1 个答案: