Question

我正在使用Great Schools Api：

fetch("https://api.greatschools.org/search/schools?key=***********&state=CA&q=cupertino&levelCode=elementary-schools&limit=1",{ 
    method: 'GET',
    Accept:'application/xml',
    headers : new Headers ({
      'content-type': 'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT',
      'Access-Control-Allow-Headers': 'Content-Type',  
    }),
    mode:'no-cors'
    })
    .then(response => {
      console.log(response, 'data')
    })

响应控制台是：

Response
bodyUsed: false
headers: Headers {  }
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""

但是在浏览器网络控制台中，我正在制定正确的XMl响应。

如何得到正确答案。

Answer 1

您正在记录响应对象。

您需要访问响应正文。

您可以返回response.text()

来执行此操作

来自fetch docs

Body.text（）获取响应流并将其读取完成。它返回使用USVString（文本）解析的promise。

fetch("https://api.greatschools.org/search/schools?key=***********&state=CA&q=cupertino&levelCode=elementary-schools&limit=1",{ 
    method: 'GET',
    headers : new Headers ({
      'Accept:'application/xml',
      'content-type': 'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT',
      'Access-Control-Allow-Headers': 'Content-Type',  
    }),
    mode:'no-cors'
    })
    .then(response => {
      return response.text()
    })
    .then(xml => {
      console.log("xml", xml)
    })

Answer 2

当 Response 的类型为您共享的 opaque 时，表示该请求仍被 cors 阻止。浏览器的网络选项卡向您显示请求的响应，但 fetch 的回调只会向您显示不透明的响应。此外，如果获取实际上成功并且响应已准备好在回调中使用，则 response.ok 将为真

无法使用fetch in react在响应中获取xml数据

2 个答案: