0

There are different ways to make a REST call in react- e.g 

 axios.post('link', JSON.stringify(data1),
          {
              headers: {"content-type" : "application/json", "Access-Control-Allow-Origin" : "*"}})
          .then(response => {
              console.log("res:", response)
          })
          .catch(err =>{
              console.log(err)
          })
        }

OR

 fetch('http://localhost:8080/feedbacks/addfeedback', {
               method: 'post',
               headers: {
                   'Content-Type': 'application/json',
                   'Access-Control-Allow-Origin' : '*'
               },
               body:body

What is the most effiecient way to enable CORS. Is there any other way that I can do this either in frontend or backend?

g00glen00b
  • 41,995
  • 13
  • 95
  • 133
Hirak JD
  • 181
  • 2
  • 7
  • 2
    Setting client request headers **does not** mean you've handled CORS; [`Access-Control-Allow-Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) is a *response* header, it needs to be set by the *server*. – jonrsharpe Feb 26 '19 at 10:37
  • Both your above ways are same. `axios` is a library that makes use of `fetch` or `xmlhttpRequest` available on the platform to make the call. And regarding `CORS`, the changes needs to happen on the `server` serving the API with the respective headers. – Panther Feb 26 '19 at 10:38
  • 1
    You can workaround this by open Chrome via `open -a Google\ Chrome --args --disable-web-security --user-data-dir` on Mac. – ChrKahl Feb 26 '19 at 10:48

1 Answers1

0

It depends on what HTTP library you are using.

See What is difference between Axios and Fetch?.

I usually use Axios, next what i do is creating a global instance and configuring Axios once.

export const api = axios.create({
    baseURL: '_URL_',
    timeout: 1000,
    withCredentials: false,
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*' // whatever you want
    }
});

// You can add common headers later
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Also i'm enabling CORS on my server side application.

Thanks to @henrik123 for good explanation:

The browser is going to see that some Javascript request has tried to initiate a request to a different domain, subdomain or port than what the browsers is currently at. If any of these things are different, the CORS kicks in. Doesn't matter if you use Axios, Fetch or any other other library

Luka
  • 129
  • 1
  • 5
  • 1
    This is not entirely correct. The browser is going to see that some Javascript request has tried to initiate a request to a different domain, subdomain or port than what the browsers is currently at. If any of these things are different, the CORS kicks in. Doesn't matter if you use Axios, Fetch or any other other library – henrik123 Feb 26 '19 at 11:24
  • I did notice that, thats why I wrote "This is not entirely correct." – henrik123 Feb 26 '19 at 13:03