0

I worked with React and fetch to send a request like:

fetch(`http://www.bilibili.com/index/catalogy/1-3day.json`,{
        mode: "no-cors"
    }).then(r => r.json()).then(r => {
        console.log(r);
    }).catch(err => {console.log(err);})

and the response is right in the network tab

but it throw an error that:

SyntaxError: Unexpected end of input
at SyntaxError (native)
at http://127.0.0.1:8888/js/video.bundle.js:30174:15

And when I try to log the promise,it appears to be an strange Object:

Response {type: "opaque", url: "", status: 0, ok: false, statusText: ""…}

this is the picture

Can someone help? I'm really confused with this

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
RockSAMA
  • 3
  • 1
  • I think you'll find that website doesn't want you using it's resources ... i.e. it's a CORS issue – Jaromanda X Oct 27 '16 at 10:48
  • Is it responding with correct formatted JSON? try `return res.text();` instead of `return res.json();` to pinpoint the problem – dlock Oct 27 '16 at 10:51
  • @deadlock, OP states `the response is right in the network tab` - it is a CORS problem – Jaromanda X Oct 27 '16 at 10:56
  • I tried another api (local nodejs server) working on my PC, this time, the json data and promise work well. It's a CORS problem indeed. – RockSAMA Oct 27 '16 at 12:51
  • But if there any method to get the data I want? maybe change the header `origin` ? – RockSAMA Oct 27 '16 at 12:53
  • there are three ways to solve CORS issues. 1 - have the third party send appropriate cors headers, 2 - use your server to "proxy" the calls to the third party site for you, 3 - a specifically designed web extension may be able to help, but this is the least preferred method because you can't force a web extension on people :p – Jaromanda X Oct 27 '16 at 22:18
  • Another option is if the third party site supports `jsonp` – Jaromanda X Oct 27 '16 at 22:19
  • possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/q/3076414/1048572) – Bergi Oct 28 '16 at 09:14

1 Answers1

0

You cannot make requests to external servers that do not support cross origin resource sharing (CORS).

By setting the no-cors mode on the request, you explicitly tell the server to make the request for side effects without being able to access its content. This is similar to when you place an <img> tag in your HTML from a third party site and can't access its contents - it's opaque to the calling code.

You need to download that json on the server side and then serve it from your own server to avoid the issue.

Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
  • Thanks for your answer about this,but now I am facing a new problem.. when I try to request the data with a nodejs,python or java program and using different encode ways(`utf8`,`gb2312`...),it cannot get the correct data I want as that presented in the browser,it's amazing. – RockSAMA Oct 29 '16 at 08:33
  • nodejs: ``` var request = require("request"); var http = require("http"); var url = "http://www.bilibili.com/index/catalogy/1-3day.json"; http.get(url,function(res){ var cc = "" res.setEncoding("utf-8"); res.on("data",function(c){ cc += c }) res.on("end",function(){ console.log(cc); }) }) ``` – RockSAMA Oct 29 '16 at 08:36