Blocked by CORS in localhost

Avatar image for elchiconube
elchiconube

6

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

#1  Edited By elchiconube

Hi guys I'm trying to create a little app with VueJS and I want to use this API. For this purpose I'm using axios library but I'm having problems: This is the function:

axios.get('http://www.giantbomb.com/api/game/3030-4725/?api_key=KEY&format=json&field_list=genres,name') .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); }) 

And I have this error in the console:

XMLHttpRequest cannot load '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Thanks guys!

Avatar image for elchiconube
elchiconube

6

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

@monkehhh:Hi, thanks for the reply, I try to understand these two threads and change the url to this:

http://www.giantbomb.com/api/game/3030-4725/?api_key=KEY&format=jsonp&json_callback=?&field_list=genres,name  Any idea?
Avatar image for elchiconube
elchiconube

6

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Hi again,

I see that axios doesn't suport jsonp and now I'm trying with this:

jsonp('http://www.giantbomb.com/api/game/3030-4725/?api_key=KEY&format=jsonp&json_callback=?', function(err, data){

if (err) {

return console.error(err.message);

} else {

return console.log(data);

}

});

Then I have this error in the console: Uncaught SyntaxError: Unexpected token ?

Thanks for your help!

Avatar image for elchiconube
elchiconube

6

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Ok I fix it! I try with other plugin called mithril:

mithril.jsonp({

url: "http://www.giantbomb.com/api/games/?api_key=KEY&format=jsonp&filter=name,image,platforms,description,original_release_date",

callbackKey: "json_callback",

})

.then(function(response) {

console.log(response)

})

thanks for your patience

Avatar image for rallax
rallax

2

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Wow, this thread is old, but I am having the exact same issues with CORS.

I can enter the url with my API key into chrome and see the JSON, I can enter it into postman and get the response as well, but when I am trying use axios or fetch the url, I get the error.

I am currently in a coding bootcamp and I was going to use the API to make a backlog app for my solo project that is due this coming Friday. I will continue to work on other aspects of the site, but unless I can get access to the API, I have nothing :(

Avatar image for eddyb
eddyb

1

Forum Posts

91

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

#7  Edited By eddyb

@rallax: This is how I've been structuring my requests with jQuery:

$.ajax({
url: _url,
dataType: "jsonp",
jsonp: 'json_callback',
data: {
api_key: 'api_key',
format: 'jsonp',
},
success: function(res) {
callback(res);
}
});

I'd prefer to be using fetch and promises, but I haven't managed to get it configured yet. Let me know if you have any luck!