23

I'm using axios to make a axios.get call in my redux action.js file. In my component this action is performed on form submission.

I'm getting status 200 in my console but not getting any response back. I'm getting the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:\\\\localhost:3000' is therefore not allowed access.

Has anybody came across such error too? Would you please share on how to resolve this.

Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
user4076248
  • 433
  • 2
  • 5
  • 10
  • [Mozilla explains this issue very well, have a look.](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) – TimoStaudinger Feb 02 '16 at 21:35
  • @TimoSta -- How do I solve this then ? I've added following to my code but still getting the same error --- var config = { headers: { 'Access-Control-Allow-Methods': 'GET,PUT,PATCH,POST,DELETE', 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' } }; const request = axios.get(url,config); – user4076248 Feb 03 '16 at 05:52
  • 1
    @TimoSta -- thank you for the link, to solve this I had to install CORS module in my server express application and use it as a middleware. I was just wondering if I could have done anything in my client side request to overcome this. Please let me know if there is any such way. Since when I make request using postman or any browser it doesn't cause any such issue. So perhaps there is something I can add to my client side request too that could have solved this too. Just curious. – user4076248 Feb 03 '16 at 10:46

4 Answers4

20

The problem is not with axios. The issue is with the server. When you serve up data you must add the following headers, before sending it.

Access-Control-Allow-Origin must be set to *

Access-Control-Allow-Headers must be set to Origin, X-Requested-With, Content-Type, Accept

anthonynorton
  • 1,173
  • 10
  • 19
  • 4
    How can I do that for a API call ? – Souvik Banerjee Jun 27 '17 at 09:22
  • 1
    I have seen this come up on the exact same code that ran fine in one environment and does not on a different environment. The server was EXACTLY the same in both cases. The frontend was on Chrome with the CORS toggle turned on. I am 100% CORs was handled correctly at server end. So I am stumped. Something is off. – Samantha Atkins Apr 06 '18 at 06:54
  • but how do I do that when using axios? – CodeMonkey Jun 03 '20 at 08:40
16

The first confusion I had tackling this problem was understanding what a preflight request means. So I will start from there.

Browsers send preflight requests whenever a request does not meet these criteria:

  1. HTTP methods matches one of (case-sensitive):
    • GET
    • POST
    • HEAD
  2. HTTP Headers matches (case-insensitive):
    • Accept
    • Accept Language
    • Content Language
    • Last-Event-ID
    • Content-Type, but only if the value is one of:
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

Preflight requests are made with an OPTIONS method that includes three additional headers that your server may not be expecting if it is not configured for CORS. They are:

  • Access-Control-Allow-Headers
  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods

If the server isn't configured for CORS, it simply responds with an empty header having HTTP status code 200. Once you have configured the server for CORS, you should include the headers listed above as headers supported by CORS.

That should clear the error and allow you communicate with the server.

Note: While your server can handle the custom header you created (in my case, Authorization for JWT authentication), it most likely won't be configured for CORS request. If you have access to your server, simply find out how to configure CORS for that server.

For more information about CORS. See https://www.html5rocks.com/en/tutorials/cors/

erika_dike
  • 251
  • 4
  • 7
0

Please try this.. it worked for my case { crossdomain: true }.

axios.get(`http://localhost:4000/api`,{ crossdomain: true }).then((result)=>{
        console.log("result",result.data.result.[0].name);
      }).catch((error)=>{
        console.log("Error hey",error);
      });
Pankaj Chauhan
  • 1,623
  • 14
  • 12
-2

This worked for me:

axios.create({
    baseURL: "http://localhost:8088"
  }).get('/myapp/user/list')
    .then(function(response) {
      callback && callback(response);
      debugger;
    })
Roberto Rodriguez
  • 3,179
  • 32
  • 31