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

Question

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

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

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

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')
)

编辑:尝试建议后出现错误图片

/image/wp693.png

/image/07rSG.png

/image/XwZsR.png

Answer 1

你得到一个 opaque response ，因为您使用的是 fetch with mode: 'no-cors'。您需要使用 mode: 'cors' 并且服务器需要发送所需的 CORS header 才能访问响应。