Request blocked by cors policy

Avatar image for matheusls
matheusls

2

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

#1  Edited By matheusls

I'm building a React app to consume this API but it does not have cors enabled, apparently, so I'm getting this error:

Access to XMLHttpRequest at 'https://comicvine.gamespot.com/api/characters?api_key=API_KEY&format=json&limit=10&offset=0&field_list=id,name' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there anyway to get around this? Am I doing something wrong?

This is the request code:

const { data } = axios.get(`${baseUrl}/characters`, { params: { api_key: process.env.REACT_APP_API_KEY, format: 'json', limit: 10, offset: 0, field_list: 'id,name', }, });

Avatar image for nafi
Nafi

1

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

@matheusls: i'm doing it with vanilla JS.Been facing this issues from superhero API as well.Had this problem with Marvel's API as well,fortunately,they were smart enough to add referrer to update developer's domain.It worked for me!
but this damn thing man!

Avatar image for batguy74
Batguy74

13

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Do you have access to the web configuration files on that server? I had this issue on my AWS server, and I believe that there was one line I had to add to my nginx config file for that site, and it fixed it. Maybe take a look there if you are still having issues

Avatar image for starchaser7
starchaser7

1

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

#5  Edited By starchaser7

I'm building a React app to consume this API but it does not have cors enabled, apparently, so I'm getting this error:

Access to XMLHttpRequest at 'https://comicvine.gamespot.com/api/characters?api_key=API_KEY&format=json&limit=10&offset=0&field_list=id,name' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there anyway to get around this? Am I doing something wrong?

This is the request code:

const { data } = axios.get(`${baseUrl}/characters`, { params: { api_key: process.env.REACT_APP_API_KEY, format: 'json', limit: 10, offset: 0, field_list: 'id,name', }, });

I got the same issue, still don't know how to fix it :/

Avatar image for ckies
ckies

1

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

So, I solved this problem by making my request in the backend. It's good practice to conceal your private API key in the backend, anyway. I built my backend using Spring Boot and in my controller class I used the global @CrossOrigin bean annotation to allow for cross-origin requests. Problem solved.
Stamp @CrossOrigin at the top of your Controller Class in a Spring Boot application, and you won't have to worry about CORS ever again!

Here's some info: https://spring.io/guides/gs/rest-service-cors/#:~:text=This%20%40CrossOrigin%20annotation%20enables%20cross,of%2030%20minutes%20is%20used.