Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I'm trying to make a request to an ERP API and i get this response:

Access to XMLHttpRequest at 'http://ip:8082/auth' from origin 'http://connector.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Although in my request there is a header Access-Control-Allow-Origin:

        getAuth() {
            axios.post('http://'+this.ip + '/auth/', {
                headers: {
                    "Content-Type": "application/json",
                    "Cookie": this.sessionid,
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
                    "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length"
                }, 
                data: {
                    username: this.username, 
                    password: this.password
                }
            }).then(response => {
                this.getItems();
            })
        },

Cors.php

'paths' => ['*'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

js/bootstrap.js

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
window.axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT, DELETE';

Added my own middleware

Middleware/cors.php

  return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
          OPTIONS');

Added it to kernel.php $routeMiddleware then web.php

Route::get('/', [App\Http\Controllers\MainController::class, 'index'])->middleware(Cors::class);

Request Headers

Request URL: http://ip:8082/auth
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Accept: application/json, text/plain, */*
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Content-Type: application/json;charset=UTF-8
Referer: http://connector.test/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
X-Requested-With: XMLHttpRequest

Doing the request on backend with PHP Curl works fine, but i want to make it work in front-end with Vue.

Have you allowed your origin in your config/cros.php? Perhaps you can wildcard (*) it for the time being to test it out. — sykez
In your example you (as in the client, via axios) are sending request headers to the server. It should be the other way around, the server (running at 192.168.1.67:8082) should send these (Access-Control-* headers) as response headers. — Joshua Angnoe
@JoshuaAngnoe The POST method works perfectly through postman — Steve
I think Postman does not adhere to CORS rulings/restrictions, it is a development tool so it will just ignore it and do its job. Another example would be to use curl to perform a api call, that will work. Another thing you could do is have a look (and possibly share with us) at the actual response headers that the server sends via Developer Tools > Network Tab > Response headers — Joshua Angnoe

yooneskh yooneskh · Accepted Answer · 2021-01-09T13:09:43

Web browsers have a security feature to stop mass scale DOS attacks to web sites. In short, any code running on X, cannot request for resources on Y unless Y has specifically allowed X to request it. this is done with Access-Control-Allow-Origins header.

You must add this to you webserver or your backend code.

Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource

2 Answers