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.
Jun 11, 2020
3
Level 2
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.
Please or to participate in this conversation.