React、Fetch-API、no-cors、不透明响应，但仍在浏览器内存中

Question

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

如果我在我的 Fetch-request 中使用 no-cors，我会得到一个不透明的响应，其中几乎没有任何内容，但是 如果我去开发者工具，我可以在那里找到我的数据并阅读它。如果我确实使用 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

您会收到一个opaque response，因为您使用的是带有模式：'no-cors' 的 fetch。您需要使用 mode: 'cors' 并且服务器需要发送所需的 CORS 标头才能访问响应。

Answer 2

Fetch 完全按照 Mozilla 文档所说的去做：

fetch 规范在两个主要方面与 jQuery.ajax() 不同：

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

默认情况下，fetch 不会从服务器发送或接收任何 cookie， 如果站点依赖于 维护用户会话（发送 cookie，凭据 init 必须设置选项）。自 2017 年 8 月 25 日起。规范更改了默认值 同源凭证策略。 Firefox 自 61.0b13 起发生了变化。

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

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

Answer 3

试试这个，看看错误发生在哪里我相信解析，但让我们检查一下

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)
});