CORS Access to XMLHttpRequest at X from origin has been blocked by CORS policy

Question

CORS Access to XMLHttpRequest at X from origin has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Hi, I am struggling to resolve my problems with CORS denying interaction of my Vue component with an external API with axios since it returns this error. I've tried both using Barryvdh's Cors header support and making a middleware and custom route. It simply won't work. Everything that has been mentioned in README.md in Barryvdh's repo has been done and unfortunately, this problem won't get resolved by any means necessary.

Here is the code, even though I don't think there's need to show since it's exactly the same as mentioned in the repo;

inside Kernel.php:

protected $middleware = [
    \Barryvdh\Cors\HandleCors::class,
inside app.php (providers array):

Barryvdh\Cors\ServiceProvider::class,

config/cors.php:

'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
'exposedHeaders' => [],
'maxAge' => 0,

Here's the axios get call (I've replaced my token with 'TOKEN')

    methods: {
        loadWeatherData: function() {
            axios.get( 'http://api.openweathermap.org/data/2.5/weather?q=London&mode=json&units=metric&appid=TOKEN' )
                .then( function( response ) {
                    console.log( 'radi' );
            }).catch( errors => {
                console.log( errors+' ne radi');
            });
        }
    },

I've composer dump-ed, nothing affected resolving the problem. Is there something I am doing wrong and are there any solutions for this problem? Thanks in advance!

CORS settings on your own application only apply to incoming requests. External requests rely on the external server's CORS setup. Otherwise, it wouldn't be much of a security feature. — matticustard, Aug 07 '19 at 22:13
Insomnia returns json perfectly from the endpoint, so I don't really see the problem from my outgoing request. — basha, Aug 07 '19 at 22:16
I'm just saying that if you are making an external request, it has nothing to do with Barrydvh, so you can rule that out — unless you have control of both servers. — matticustard, Aug 07 '19 at 22:18
...therefore it might be more useful for you to post some more relevant code, such as your axios request. — matticustard, Aug 07 '19 at 22:23

score 1 · Accepted Answer · answered Aug 08 '19 at 01:49

The problem here seems to be that axios likes to send its own default headers, and these don't pass the preflight check for your external request. To fix this, you will need to remove the offending headers.

I was able to recreate your error, and also to bypass the CORS issue using the code below.

let url = 'https://api.openweathermap.org/data/2.5/weather?q=London&mode=json&units=metric&appid=TOKEN';

// create a new instance so we don't delete the headers for other requests
let instance = axios.create();

// delete headers if existing
delete instance.defaults.headers.common['Accept'];
delete instance.defaults.headers.common['X-Requested-With'];
delete instance.defaults.headers.common['X-CSRF-TOKEN'];

// use the new axios instance to make your get request
instance.get(url)
    .then(function(response) {
        console.log(response);
    }).catch( errors => {
        console.log(errors + ' ne radi');
    });

Hope this helps and good luck!

score 0 · Answer 2 · answered Dec 15 '21 at 09:39

0

You can add into TrustHosts.php Middleware without doing anything extra. Read more from here https://stackoverflow.com/a/70361284/2612926

answered Dec 15 '21 at 09:39

Anup

169
8

CORS Access to XMLHttpRequest at X from origin has been blocked by CORS policy

2 Answers2