Laravel: trying to make an API connection between two domains

Question

User flow

On my homepage I want the user to insert their License Plate.
The License Plate number will make a request in the API domain
I will get the details back for the Car which has the License Plate

Issue

The API won't accept my request, I get the console error:

has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

Installed package for CORS

I have installed the barryvdh/laravel-cors package

config/cors.php

return [

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

Vue Component

methods: {
            test(){

                let config = {
                    headers: {
                        "X-AUTH-TOKEN": "uniqueApiToken",
                        "Access-Control-Allow-Headers": true
                    }
                }
                axios.get('https://v1.motorapi.dk/vehicles/ar24300', config)
                    .then(res => {
                        console.log(res.data);
                })
                    .catch(err => console.log(err))
            }
        }

Console Message:

mdexp mdexp · Accepted Answer · 2019-08-07T12:26:21

UPDATE
Based on comments, the domain you are requesting to isn't your application, so you have no control over what headers are allowed by the api you are calling.

So that issue comes because laravel automatically registers the csrf header in axios for every request.

You have two options:

Globally remove the csrf header and use it only when you are calling your own laravel apis. To delete the global header you have use this line before the first axios call (or at the bottom of resources/js/bootstrap.js file if you are using these):

delete window.axios.defaults.headers.common['X-CSRF-TOKEN'];

However, if you call your laravel api you have to pass back the header for each request like so:

axios.get('url', {
    headers: {
        'X-Csrf-Token': document.head.querySelector('meta[name="csrf-token"]').content
    }
});

^{(recommmended)} Create an axios instance for external calls and remove the csrf token on that instance only. Just remember to use that instance to make external calls and the default axios object to make internal ones:

// Create the external instance at the end of the boostrap.js file
let motorapi = axios.create();
delete motorapi.defaults.headers.common['X-CSRF-TOKEN'];

// Then you can use motorapi as it was axios where you need it
motorapi.get('url', config);

Old answer

You have to add the x-csrf-token header to the allower headers (try to be specific and include just the headers you need), so your configuration will become:

config/cors.php

return [
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => [
        'Content-Type',
        'X-Auth-Token',
        'Origin',
        'Authorization',
        'X-Csrf-Token',
        'X-Requested-With'
    ],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
];

Laravel: trying to make an API connection between two domains

1 Answers

Old answer