axios: CORS error No 'Access-Control-Allow-Origin' header is present on the requested resource

Hey everyone, I had this problem too, not sure is it’s the same as everyone else but I had

axios.get(‘localhost:3000/posts’) .then((res) => { … })

which I was able to make work by simply adding

axios.get(‘http://localhost:3000/posts’)…

My solution is axios.get('https://cors-anywhere.herokuapp.com/' + yourUrl)

update: doesn’t work

My server added Access-Control-Allow-Origin header to options request.

still get the error.

And it’s strange that axios actually received 200 & the data server returned. Don’t know why I still get the error.

it was problem in server not accepting OPTIONS requests, because routes were declared as GET::sometnig or POST:: something, so the preflight couldn’t pass and the POST request was decliend, hope this will help another people to prevent hours of googling

Looks like your server does not include the Access-Control-Allow-Origin header in response to a preflight request (OPTIONS). A CORS request will fail if Access-Control-Allow-Origin is missing.

Here are some great articles that explain how CORS works:

• https://www.html5rocks.com/en/tutorials/cors/
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Hope this helps!

There is no option as crossDomain inside the Axios. Please study the source-code before giving/using wrong clues.

I just realized my comment last year got 100+ downvotes. I don’t know why - was I doing something bad/insecure? I posted about adding http to the request to get it to work when running on localhost (I think my actual situation was axios failing in a test env).

Disable the chrome security.Create a chrome shortcut right click -> properties -> target, paste this “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir=“c:/chromedev”

didn’t check the thread for longer, but the success to this issue is to

• allow Access-Control-Expose-Headers: Access-Control-Allow-Origin on the server side,
• Access-Control-Allow-Origin: * < server
• set axios option crossDomain: true < axios
• don’t forget to enable Access to OPTIONS requests as well < server

@andylaci How exactly did you fix this? i am also using axios with laravel (laravel-cors specifically) and i would like to know what you did to make the server accept OPTIONS

Tried all the solution mentioned above. nothing works. finally found one - https://github.com/expressjs/cors i hope it helps you guys

I found that when your (backend) method’s response isn’t interpretable by the front-end, you can receive a CORS-looking issue. For example, I was using die('message'); in my Laravel method and I received a CORS complaint, despite my CORS being whitelisted. After changing my response to just be return ['status' => 'success']; which formats over into JSON to the FE - problem solved. Curious if this may be the issue for some of you too. 😃

Hi @shraddha18 , I’ve added all relevant code and a few notes to this gist: https://gist.github.com/DavidCWebs/4e4adde53a9c54f94e25e8a72f1251e8 Let me know if you need more info!

Same. Using Flask with flask-cors

If you are using nodejs, use

var cors = require('cors');
var express = require('express');
var app = express();
app.use(cors());

It fix CORs at server, if you cant send CORS request, test the Route locally, sometimes route dont work on production (For example, caused by nginx), and wrongly shows the CORS error. That was my case.

Try a simple route, like

app.post ('/test', (req, res) => {
	res.send('test route');
})

I noticed that the route starting with / auth was giving error in Nginx, and said that it was because of CORS I fixed only by changing the location of the route with error From ‘/auth/login’ to /login/ Hope this helps

Just avoid using the word “localhost”. Why not IP instead?

@jsbimra can you try this : axios.get(url,{crossDomain : true}).then(“your code goes here”) . I hope this will solve your problem.

I had the same issue sending a POST request from a Vue app to Laravel API. The comment on 4 Dec by @andylaci helped! Fixed by adding a new route responding to the OPTIONS request method in the backend. This gives back the access control headers required for the POST request to proceed.

I wonder how anyone solved this problem. I’ve been trying to make this work for 3 days on a demo project I wish to present, but this has been halting me ever since. YouTube tutorials make it seem so simple, yet everything I do exactly like them fail, and it seems like the OPTIONS request does not send the request headers I specify.

Instead of passing around a configuration object, I used the supposedly working axios.defaults in one module, like this :

   axios.defaults.headers.common = {
      ...axios.defaults.headers.common,
      'Access-Control-Allow-Origin': 'http://localhost:3000',
      "Content-Type": 'application/json',
      "Authorization": token ? `Token ${token}` : undefined
   };
   axios.defaults.preflightContinue = true;
   //axios.defaults.crossDomain = true;
   axios.defaults.withCredentials = !!token;

When I perform the actual request, I can check that the options are indeed set : console.log(axios.defaults);, but the request ends with a code 200 (success) and I get

As for the server, I’m using Django, and I watched about half a dozen videos, read the official docs, etc. and then fiddled some more. Nothing works.

Afrer several desperate hours I realized that cause of my CORS error was request header

"Content-Type": 'application/json'

when I removed it, requests started working like a charm

maybe it can help someone as desperate as me

Install this package cors by running this commands

npm i cors

after that add this

app.use(cors())

to your code after

const app = express()

It should look like this

const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors())

I Hope this help

A few have mentioned this, but if you’re using Flask, you should really try adding flask_cors before doing anything on the front-end. First pip install flask-cors==3.0.7, then:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

Also, in my VueJS app, sometime just killing the process, restarting the server (e.g. CTRL + C then yarn serve) and restarting chrome solved this (even without flask_cors),

his error is caused by CORS security. When Browser hits the request to another domain, by default, it denies the request.

Possible Solutions: We need to allow this origin to Laravel server side. So we need to create one middleware at the backend and apply this middleware to every API request. By putting this middleware, we are explicitly told Laravel that we are allowing this request to access our resources.

Download the following Laravel Specific CORS package to avoid this issue and follow the steps. composer require barryvdh/laravel-cors Add the Cors\ServiceProvider to your config/app.php provider’s array

Barryvdh\Cors\ServiceProvider::class,

To allow CORS for all your routes, add the HandleCors middleware in the $middleware property of app/Http/Kernel.phpclass:

protected $middleware = [ // … \Barryvdh\Cors\HandleCors::class, ]; You can publish the config using this command:

php artisan vendor:publish --provider=“Barryvdh\Cors\ServiceProvider” Now, try again, it will save the data into the database. I have not set the redirect after saving the data but will set in short, while you can check the values in the database.

I wonder how anyone solved this problem. I’ve been trying to make this work for 3 days on a demo project I wish to present, but this has been halting me ever since. YouTube tutorials make it seem so simple, yet everything I do exactly like them fail, and it seems like the OPTIONS request does not send the request headers I specify.

Instead of passing around a configuration object, I used the supposedly working axios.defaults in one module, like this :

   axios.defaults.headers.common = {
      ...axios.defaults.headers.common,
      'Access-Control-Allow-Origin': 'http://localhost:3000',
      "Content-Type": 'application/json',
      "Authorization": token ? `Token ${token}` : undefined
   };
   axios.defaults.preflightContinue = true;
   //axios.defaults.crossDomain = true;
   axios.defaults.withCredentials = !!token;

When I perform the actual request, I can check that the options are indeed set : console.log(axios.defaults);, but the request ends with a code 200 (success) and I get

As for the server, I’m using Django, and I watched about half a dozen videos, read the official docs, etc. and then fiddled some more. Nothing works.

Hello, I have encountered the same problem. I have checked a lot of information and have not solved it. How do you deal with it?

This problem will not be solved until backend allows. So guys stop looking for solution in front end and focus only backend how to allow cors. That’s the solution.

`

axios.get( 'http://localhost:8000/api/###',
 { 
      headers: {
          'Access-Control-Allow-Origin': '*',
       }
}).then(function (response) {
  console.log('response is : ' + response.data);
}).catch(function (error) {
    console.log(error.response);
});`

Just in case it helps anyone, I finally solved this after banging my head for hours and wandering tirelessly across the wild stretches of Internet forums,

I’m using Laravel (5.8) on the server-side and Vue (CLI 3) for the front-end with axios for my server calls. Chrome constantly gave me CORS error even when I had CORS middleware on the server. I had to do 2 things.

1. My CORS implementation included Access-Control-Allow-Origin and Access-Control-Allow-Methods, but not Access-Control-Allow-Headers. Chrome was constantly screaming about this particular header and I was not reading the err msg carefully, so I included that. My CORS now looks like this:

if(env('APP_DEBUG'))
{
  return $next($request)
                 ->header('Access-Control-Allow-Origin', '*')
                 ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                 ->header('Access-Control-Allow-Headers', '*');
  }
  else {
    return $next($request);
}

for safety, I have included APP_DEBUG check, so that cross-origin requests are not served in deployment.

1. I had to enable OPTIONS route, which is invoked by the clients before making actual GET or POST call. If you do not have OPTIONS route in your api, this will still fail even when CORS is correct. I added the following route to my api.php:

if(env('APP_DEBUG')) {
  Route::options('/{any?}', function() {})->where('any', '.*');
 }

and with Almighty’s grace I’m all good now. Hope this helps someone down the road.

It seems you are trying to call 127.0.0.1:3000 from localhost:3000 , and browser are treating them as separate domains.

FYI, access-control-allow-origin header needs to be set by the server, not the client. So in your case, you need to check how to configure cors with django, and allow CORS requests from localhost.

Guys, just download a plugin to intercept request like “ModHeaders” in Chrome and then in the response headers add “Access-Control-Allow-Origin” with value “*”. That will simulate as your server is sending you that in the header response.

@gbrits thanks for the tip! This was the case for me. I couldn’t figure out why CORS wasn’t working for me. Turns out I was debugging some things using die('...'); in my code which didn’t allow the middleware headers to be sent in the response. Removing the die did the trick. Thanks!

install this https://github.com/barryvdh/laravel-cors… if it still gives this issue use ngrok to test your apis

Hi @DavidCWebs Is it possible to have a snippet of the code you entered? It will definitely help make things clearer.