Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

FrankClark's avatar

Laravel 7 CORS configuration issue axios - external api

Hello There,

I am having a CORS issue, which seems to be the case every time I create a Laravel project. I've thrown a lot of sh*t at the wall but so far nothing has stuck.

Laravel 7 now apparently has CORS built in, and I believe I have it configured correctly. I have made some changes to the configuration in an attempt to force it to work. Here is my config :

<?php
return [

    'paths' => ['*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => ['*'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [
        'Cache-Control',
        'Content-Language',
        'Content-Type',
        'Expires',
        'Last-Modified',
        'Pragma',
    ],
    'max_age' => 0,
    'supports_credentials' => false,

];

In my bootstrap.js I have

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers['crossDomain'] = true;
window.axios.defaults.headers['Access-Control-Allow-Origin'] = '*';

let csrf = document.querySelector('meta[name="csrf-token"]');
if (csrf) {
    window.token = csrf.getAttribute('content');
    window.axios.defaults.headers.common["X-CSRF-TOKEN"] = window.token;
} else {
    console.error("CSRF token not found!")
}

My actual axios request (included the headers again to be sure)

axios.get(`https://pixabay.com/api?key=17006889-26607170fc9b6e04fb874a7cb&=house`, {headers: {
                      'crossDomain': true,
                      'Access-Control-Allow-Origin': '*',
                      'Content-Type': 'application/json',
                      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PATCH, PUT',
                  },}).then((response) => {
                  console.log(response.data);
                  return response.data[0].imageURL;
              }).catch((error) => {

              });

I am also using latests Homestead.

Any advise would be greatly appreciated.

0 likes
3 replies
saifulazr86's avatar

I never knew there were already cors built in into laravel 7. Thanks for the info. But, could it be that you first need to allow cors on the server config (nginx, apache) itself? Like allow every request to pass. and then let laravel taking over the check on application side. Its akin to how you would set upload size in server to something big enough, but then let laravel validation to check whether the file uploaded is within the allowable size.

FrankClark's avatar

Weirdly i switched to a different images API and everything now works, might just be the pixabay server, but can't confirm anything on google.

I'll mess around with apache config and see where I get. Can't find anything in Homestead documentation about it.

Hidjrie's avatar

I have same problem with openweather API but now it works. This what I do:

remove these configuration in bootstrap.js

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers['crossDomain'] = true;
window.axios.defaults.headers['Access-Control-Allow-Origin'] = '*';

also remove header config in axios.get

I dont know this step will work with you, but for me its work 😅

Sorry my bad English, just want to share

2 likes

Please or to participate in this conversation.