Level 39
'supports_credentials' => true,
Feb 18, 2021
8
Level 1
CORS problems with axios calls to laravel
Hi all, I've some troubles with axios calls from vue to a Laravel server that I made. In Server side I have this cors.php configuration:
<?php
return [
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => ['*'],
'allowed_headers' => ['*'],
'exposed_headers' => ['*'],
'max_age' => 0,
'supports_credentials' => false,
];
and when I call from vue in this way:
var href="https://authserver/api/mysql_verify";
axios.post(href,{user:'pippo',pass:'pappa'}).then(resp=>{
.....
}
}).catch(err => {
console.log("Errore "+this.$options.name+"->startLogin su chiamata "+href+": "+err);
});
I obtain this error:
NS_ERROR_DOM_BAD_URI
So I understood that it is necessary to add
Access-Control-Request-Headers
Access-Control-Request-Method
headers to server side. But cors.php is all enabled with '*' !!! What can I do? Bye and thank you
Level 1
@sr57 following this guide I didn't resolved. But I noticed this:
POST /api/mysql_verify undefined
Host: authserver
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0
Accept: application/json, text/plain, */*
Accept-Language: it-IT,it;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
X-Requested-With: XMLHttpRequest
X-CSRF-TOKEN: aXMpyyutbIh19Fi5BbpdHFzK2yidDSC9MzPXURdP
Access-Control-Allow-Origin: *
Content-Type: multipart/form-data; boundary=---------------------------38186728422895171291914276371
Content-Length: 443
Origin: https://vaccinoweb
Connection: keep-alive
Referer: https://vaccinoweb/login
in the raw of the request there is a 'undefined' ... why? my be it the problem?
Level 39
Your routes are ok/defined?
Level 1
@sr57 I think it's ok. I made a 'php artisan route:list' and this is a part of it:
| GET|HEAD | admin/get_users_info | | App\Http\Controllers\Admin\userAdminController@get_users_info | web |
| | POST | api/my_ldap_verify | | App\Http\Controllers\Auth\LoginController@my_ldap_verify | web |
| | | | | | guest |
| | POST | api/my_sr_ldap_verify | | App\Http\Controllers\Auth\LoginController@my_sr_ldap_verify | web |
| | | | | | guest |
| | POST | api/mysql_verify | | App\Http\Controllers\Auth\LoginController@mysql_verify | web |
|
it seems ok and those are routes in web.php
//rotte API
Route::group(['namespace' => 'Auth', 'prefix' => 'api'], function()
{
Route::post('/my_sr_ldap_verify','LoginController@my_sr_ldap_verify');
Route::post('/my_ldap_verify','LoginController@my_ldap_verify');
Route::post('/mysql_verify','LoginController@mysql_verify');
Route::get('/my_sr_ldap_verify','LoginController@my_sr_ldap_verify');
Route::get('/my_ldap_verify','LoginController@my_ldap_verify');
Route::get('/mysql_verify','LoginController@mysql_verify');
});
Level 5
send request with curl like
curl -X POST -d 'user=pippo&pass=pappa' 'https://authserver/api/mysql_verify'
result is ok?
Level 1
ottaviane@ottaviane:~$ curl -X POST -d 'user=pippo&pass=pappa' 'https://authserver/api/mysql_verify' -k
{"esito":"OK"}
ottaviane@ottaviane:~$
and with no https:
ottaviane@ottaviane:~$ curl -X POST -d 'user=pippo&pass=pappa' 'http://authserver/api/mysql_verify'
{"esito":"OK"}
ottaviane@ottaviane:~$
The problem is the same if I use not https
Level 39
CSFR protection ?
1 like
Level 1
yes it is!!!!! It was a CRSF problem. I resolved in this way: in my bootstrap.js file located in resources/js I added an ajax setup command to force the inclusion of the CSRF token in its headers. this is my complete bootstrap.js:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers["Access-Control-Allow-Origin"] = "*";
//this was added thanks to SR57 and after a visited https://laravel.com/docs/csrf#csrf-x-csrf-token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
window.Vue = require('vue');
window.Vuex = require('vuex');
//events
export const EventBus = new Vue();
Now it works but I'd like todo the same only with axios headers setting, how to do? thanks all
Please or to participate in this conversation.