[英]Cross-Origin Read Blocking Error in reactjs
I'm learning ReactJS.我正在学习 ReactJS。 I'm using
fetch
for getting data from an API.我正在使用
fetch
从 API 获取数据。 I used below code for it.我使用了下面的代码。
fetch('http://myurl.com/api')
.then(res => res.json())
.then(res => console.log(res));
The API is hitting with status 200 ok
but in response Nothing to Preview and in console getting below error API 的状态为
200 ok
,但响应Nothing to Preview并且在控制台中低于错误
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://myurl.com/api with MIME type application/json.
跨域读取阻止 (CORB) 阻止了 MIME 类型为 application/json 的跨域响应http://myurl.com/api 。 See https://www.chromestatus.com/feature/5629709824032768 for more details.
有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768 。
I also added headers in below code.我还在下面的代码中添加了标题。
fetch("http://xxx.xxx.xxx.xxx:8081/api/category/popular",{
method: 'GET',
headers: {
'Access-Control-Allow-Origin': '*',
},
})
I have below json in API response我在 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
}
]
}
通常 CORS 标头(需要服务器更改)您需要在 API 服务器中设置允许的请求域。
Cross-Origin Read Blocking (CORB).跨域读取阻塞 (CORB)。 It is designed to prevent the browser from delivering certain cross-origin network responses to a web page.
它旨在防止浏览器向网页传递某些跨域网络响应。
First Make sure these resources are served with a correct "Content-Type", ie, for JSON MIME type - "text/json", "application/json", HTML MIME type - "text/html".首先确保这些资源使用正确的“Content-Type”,即 JSON MIME 类型 - “text/json”、“application/json”、HTML MIME 类型 - “text/html”。
Second: set credentials to same-origin第二:将凭据设置为同源
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))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.