小编典典

在OPTIONS响应后使Fetch API与CORS配合使用

reactjs

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

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

该API不允许'Content-type'比其他任何东西'application/json'

使用此限制,我试图使用fetchReact-Native 的方法来获取数据。

方法1(无要求):

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

使用此方法,浏览器会自动将内容类型发送为“文本/纯文本”。我认为这是因为默认情况下,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网络工具,我可以看到服务器返回数据:对服务器的第一个请求是fetchfor
OPTIONS。为此,服务器使用空对象以及上述标头集进行答复。下一个调用是实际的POST
API调用,服务器将使用包含某些数据的适当JSON响应对之进行响应。但是,通过我的代码进入控制台的响应是{}。我认为这是因为react的fetchAPI正在返回OPTIONS调用的响应,而不是实际的POST调用。

有什么方法可以忽略OPTIONS请求的响应并获得then处理后续请求响应的方法吗?


阅读 351

收藏
2020-07-22

共1个答案

小编典典

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

因此,您需要执行以下操作:

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