Question

我正在学习ReactJS。我正在使用fetch从API获取数据。我用下面的代码。

 fetch('http://myurl.com/api')
              .then(res => res.json())
              .then(res => console.log(res));

API的状态为200 ok，但响应没有可预览的内容，并且在控制台中出现错误以下消息

跨源读取阻止（CORB）阻止了跨源响应 http://myurl.com/api，MIME类型应用程序/ json。看到 https://www.chromestatus.com/feature/5629709824032768了解更多详细信息。

我还在下面的代码中添加了标题。

 fetch("http://xxx.xxx.xxx.xxx:8081/api/category/popular",{
                 method: 'GET',
                  headers: {
                    'Access-Control-Allow-Origin': '*',
                  },
              })

我在API响应中包含以下json

  {  
   "data":[  
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c2f74e8a4d846591b2b1a41",
         "name":"Shop",
         "modified_at":"2019-01-04T14:59:52.791Z",
         "created_at":"2019-01-04T14:59:52.791Z"
      },
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c2f7566a4d846591b2b1a42",
         "name":"Home Service",
         "modified_at":"2019-01-04T15:01:58.507Z",
         "created_at":"2019-01-04T15:01:58.507Z"
      },
      {  
         "parent_id":"5c2f74e0a4d846591b2b1a40",
         "icon":"http://myurl.in:8081/default.png",
         "_id":"5c5c2dd30d017c401ec17253",
         "name":"Test",
         "modified_at":"2019-02-07T13:08:35.653Z",
         "created_at":"2019-02-07T13:08:35.653Z",
         "__v":0
      }
   ]
}

Answer 1

跨域读取阻止（CORB）。它旨在防止浏览器向网页传递某些跨域网络响应。

首先，请确保为这些资源提供正确的“ Content-Type”，即JSON MIME类型-“ text / json”，“ application / json”，HTML MIME类型-“ text / html”。

第二：将凭据设置为同源

 fetch("https://example.com/api/request", {
            method: 'GET',
            body: JSON.stringify(data),
            credentials: "same-origin", //include, same-origin
            headers: {Accept: 'application/json', 'Content-Type': 'application/json',},
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

Answer 2

通常，您需要在API服务器中设置允许的请求域的CORS标头（需要更改服务器）。

reactjs中的跨域读取阻止错误

2 个答案: