Question

我一直在尝试制作一个React网站，该网站会从API获取GET响应并将其打印到我的.html文件中。我设法正确地获取文件，但我无法访问JSON数据服务器发送给我。

如果我在我的Fetch-request中使用no-cors，我会得到一个几乎没有任何内容的不透明响应，但是如果我转到Developer工具，我可以在那里找到我的数据并阅读它。如果我确实使用cors，几乎是一样的。我收到403错误，但我的数据在浏览器内存中，但我的代码没有打印出来。我可以在开发人员工具中找到Network的响应。

为什么服务器会给我一个错误，但我仍然得到我的数据？我如何访问它，如果它在浏览器中？

class Clock extends React.Component {
constructor(props) {
super(props)
  this.state = {data2: []}
  this.apihaku = this.apihaku.bind(this)
 }

componentDidMount() {
this.apihaku(),
console.log("Hei")
 }

apihaku () {
   fetch('https://#######/mapi/profile/',
  {method: 'GET', mode:'no-cors', credentials: 'include',
  headers: {Accept: 'application/json'}}
 ).then((response) => {
  console.log(response);
 response.json().then((data) =>{
    console.log(data);
  });
  });
}



render() {
 return <div>
  <button>Button</button>
   </div>
 }}

ReactDOM.render(
   <Clock />,
 document.getElementById('content')
 )

编辑：尝试建议后的错误图像

https://i.stack.imgur.com/wp693.png

https://i.stack.imgur.com/07rSG.png

https://i.stack.imgur.com/XwZsR.png

Answer 1

尝试这一点，看看发生错误的地方我相信解析，但让我们检查一下

     fetch(https://#######/mapi/profile/, {
       method: "GET",
        headers: {
          "Content-Type": "application/json"
       },
       credentials: "include"
     })
    .then((response) => {
      console.log(response);
        try {
         JSON.parse(response)
        }
        catch(err){
          console.log("parsing err ",err)
        }

    })
    .catch((err)=>{
      console.log("err ",err)
    });

Answer 2

你得到一个opaque response，因为你正在使用fetch模式：'no-cors'。您需要使用mode：'cors'，服务器需要发送所需的CORS标头才能访问响应。

Answer 3

Fetch确实按照Mozilla的说明执行了文档规定的操作：

提取规范与jQuery.ajax（）的主要区别在于两个方面：

从fetch（）返回的Promise不会因HTTP错误状态而拒绝   即使响应是HTTP 404或500，它也会解析   通常（将ok状态设置为false），并且只会在   网络故障或是否有任何阻止请求完成的事情。

默认情况下，提取操作不会从服务器发送或接收任何Cookie，   如果站点依赖于，则会导致未经身份验证的请求   维护用户会话（要发送Cookie，需要使用凭据init   选项必须设置）。自2017年8月25日起。此规范更改了默认设置   凭据策略为同源。自61.0b13起，Firefox进行了更改。

因此，您需要使用CORS，否则您将得到一个不透明的响应（没有JSON），然后对我的403提示您未正确进行身份验证。使用Postman测试您的API，如果我不得不猜测我会说API不是发送cookie，因为它是GET请求，因此无论您在客户端上设置标题的多么好，它都将无法工作。尝试将其作为POST。 GET请求实际上仅应用于在浏览器中删除初始HTML。我想为您的标头使用这些，包括API发送的凭据，并允许域不同。

mode: "cors", // no-cors, cors, *same-origin *=default
credentials: "include", // *same-origin

React，Fetch-API，no-cors，opaque response，但仍在浏览器内存中

3 个答案: