reactjs - Axios having CORS issue

Question

I added proxy in package.json and it worked great, but after npm run build the CORS issue has resurfaced again, does anyone know how to deal with CORS issue after npm run build in React.

I have tried to add headers in axios request using various methods. However, I failed to add 'Access-Control-Allow-Origin':'*' in axios request. My code is as follwing:

package.json

  "proxy": {
      "*":{ "target" : "http://myurl"}
   } 

GetData.js

  axios.defaults.baseURL = 'http://myurl';
  axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
  axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
  axios.get(serviceUrl, onSuccess, onFailure)
  .then(resp => { 
        let result = resp.data;
        onSuccess(result);
  })
  .catch(error => {
        if(onFailure) {
            return onFailure(error);
        }
  })
 }

Note: It has enabled from server side, it is still not working.Currently, I can't change code from server side, My work is limited to client side only.

Answer 1

your server should enable the cross origin requests, not the client. To do this, you can check this nice page with implementations and configurations for multiple platforms