CORs issue in axios using React

Question

So I've researched the web and tried almost all the solutions on their for this issue I am having with CORs using yelps fusion API. I'm using react but trying to call this API with axios. Here is my code.

static YelpApiSearch(searchedCity, onSuccess, onError) {
const config = {
  Authorization: process.env.REACT_APP_KEY
  Origin: "https://vendors.test"
};
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
axios
  .get(`https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?categories=foodtrucks&location=${searchedCity}`,
    {
      withCredentials: true,
      headers: config
    }
  )
  .then(onSuccess)
  .catch(onError); }

Refused to set unsafe header origin error

Any help would be appreciated. Thanks!

`Authorization: process.env.REACT_APP_KEY` — That looks like something which is supposed to be a secret shared only by you and Yelp. Do you really want to give it to Corsanywhere and every user of your app so they can make calls to Yelp using your access rights? — Quentin, Jan 30 '19 at 21:44
Could you explain why you are setting the origin requested with headers, and also why you are using cors anywhere in this case? — Garrett Motzner, Jan 31 '19 at 00:45

score 1 · Accepted Answer · answered Jan 30 '19 at 21:42

This isn't a CORS problem per se. The error message tells you what the problem is.

Refused to set unsafe header origin error

You can't specify the Origin header. It is determined by the browser. If you could specify it, it would break a large part of CORS's security.

Remove your attempt to specify it from the config object.

CORs issue in axios using React

1 Answers1