Ndtyjky

I am getting the following error when I am trying to make an api call to kickstarter Staff pick json endpoint

This is what the error exactly looks like

localhost/:1 Access to XMLHttpRequest at
'https://www.kickstarter.com/discover/recommended?format=json' from
origin 'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

I have previously encountered this error but that was when I was trying to make a local API call.

I known I can enable cors on my browser which might possibly fix the error but I am trying to avoid it.

Any ideas or fixes?

I am using axios for making api calls

axios.get("https://www.kickstarter.com/discover/recommended?format=json").then(response => {

[Update:] Can someone also help me in figuring out how we can use it with Promise.

 let Base_url = axios.get(base_url)

  let StaffPick = axios.get(staffPick)





   return Promise.all(Base_url, StaffPick).then(response => {

Where staff pick is https://www.kickstarter.com/discover/recommended?format=json
and
base_url is: http://coincap.io/map

Try it like this and it should work:

fetch(

  'https://cors-anywhere.herokuapp.com/https://www.kickstarter.com/discover/recommended?format=json')

  .then(response => response.json())

  .then(data => console.log(data));

Or the equivalent with axios...

Here is live demo on code sandbox: https://codesandbox.io/s/ox7wz9ny15

Instead of writing our own proxy server we're using this one: https://github.com/Rob--W/cors-anywhere

Note: if you want to use this in production I would recommend writing your own proxy server... More info on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS