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   gt             let result   resp data          onSuccess result           catch error   gt            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

User · Answer

I had got the same CORS error while working on a Vue.js project. You can resolve this either by building a proxy server or another way would be to disable the security settings of your browser (eg, CHROME) for accessing cross origin apis (this is temporary solution & not the best way to solve the issue). Both these solutions had worked for me. The later solution does not require any mock server or a proxy server to be build. Both these solutions can be resolved at the front end.

You can disable the chrome security settings for accessing apis out of the origin by typing the below command on the terminal:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

After running the above command on your terminal, a new chrome window with security settings disabled will open up. Now, run your program (npm run serve / npm run dev) again and this time you will not get any CORS error and would be able to GET request using axios.

Hope this helps!

User · Answer

May help to someone   I m sending data from react application to golang server   Once I change this  w Header   Set  Access-Control-Allow-Origin         Error has fixed   React form submit function   async handleSubmit e        e preventDefault         const headers              Content-Type    text plain              await axios post           http   localhost 3001 login                         user name  this state user name              password  this state password                      headers            then response   gt                console log  Success          gt    response                       catch error   gt                console log  Error          gt    error                       Go server got Router   func main          router    mux NewRouter        router HandleFunc   login   Login Login  Methods  POST        log Fatal http ListenAndServe   3001   router       Login go   func Login w http ResponseWriter  r  http Request          var user   Models User       data  err    ioutil ReadAll r Body       if err    nil           err    json Unmarshal data   amp user          if err    nil               user   Postgres GetUser user UserName  user Password              w Header   Set  Access-Control-Allow-Origin                    json NewEncoder w  Encode user

User · Answer

CORS issue can be simply resolved by following this  Create a new shortcut of Google Chrome update browser installation path accordingly  with following value   quot C  Program Files  x86  Google Chrome Application chrome exe quot  --disable-web-security --user-data-dir  quot D  chrome temp quot

User · Answer

I have encountered with same issue  When I changed content type it has solved  I m not sure  this solution will help you but maybe it is  If you don t mind about content-type  it worked for me   axios defaults headers post  Content-Type     application x-www-form-urlencoded

User · Answer

This work out for me     in javascript    Axios               method   post               headers     Content-Type    application x-www-form-urlencoded                 url   https   localhost 44346 Order Order GiveOrder               data  order              then function  response                console log response data                   and in the backend   net core     in startup      region Allow-Orgin             services AddCors c   gt                                c AddPolicy  AllowOrigin   options   gt  options AllowAnyOrigin                                  endregion   and in controller before action   EnableCors  AllowOrigin

User · Answer

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

[reactjs] Axios having CORS issue

Examples related to reactjs

Examples related to proxy

Examples related to cors

Examples related to axios