ReactJS: No 'Access-Control-Allow-Origin' header with XMLHttpRequest

Question

The code below gives the next error. I\'ve set the header. I found the problem lies in CORS but couldn\'t find how to make it work. In the commented I tried to send request with

Answer 1

The easiest way to do this, since you have no control of the data that is being send by the server is to use cors-anywhere. It adds CORS to the data that is being send from the server.

There is a preconfigured heroku app for cors-anywhere at this link.

You can change your axios call to

  axios.get('https://cors-anywhere.herokuapp.com/https://picasaweb.google.com/data/feed/api/user/' + response.googleId + '?kind=album&access=public', config)
   .then(function(response2){
     console.log(response2);
   })
   .catch(function(error){
     console.log(error);
   });

so that you'll get a CORS header to the response.

Answer 2

You need to allow the whitelist header "http://localhost:3000" on you Google developer account.

or

Try changing the dataType: 'jsonp' in your ajax call.