我正在尝试从我们的API中获取数据。该API已启用CORS支持,并向OPTIONS请求返回以下响应:
Access-Control-Request-Headers:content-type Access-Control-Allow-Origin:*
该API不允许'Content-type'比其他任何东西'application/json'。
'Content-type'
'application/json'
使用此限制,我试图使用fetchReact-Native 的方法来获取数据。
fetch
方法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
{}
POST
有什么方法可以忽略OPTIONS请求的响应并获得then处理后续请求响应的方法吗?
then
您遇到的直接问题是,当前编写的代码期望响应为JSON,但是响应实际上是您需要处理以获取JSON的Promise。
因此,您需要执行以下操作:
fetch("https://example.com") .then(response => response.json()) .then(jsondata => console.log(jsondata))