CODEWITHSUNDEEP
laravelvue.jsaxios
Steve
Steve

Reputation: 645

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

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.

Upvotes: 6

Views: 49738

Answers (2)

Yura
Yura

Reputation: 2248

Try this.

axios.post('http://yourdomain.com', {
    withCredentials: true,
    // put the rest of your config here
})

I believe it happens because you are sending them to the server but not marking it with withCredentials so the server doesn't know from where the request came from or simply ignoring it.

This happens to me as well, and this method works for me.

Upvotes: -1

yooneskh
yooneskh

Reputation: 813

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.

Upvotes: 3

Related Questions