come risolvere cors Consenti il controllo degli accessi nell'applicazione vue js e laravel
Ho provato quasi tutto. Il mio front-end è sviluppato in vue js. il backend è in laravel. abbiamo scritto api per un altro sito web da cui stiamo cercando di recuperare i dati. Se accedo direttamente all'URL di quel sito web fornisce tutti i dati ma quando provo ad accedervi dal mio sito web con axios mi dà questo errore.
Access to XMLHttpRequest at 'https://example.com/api/tickets/fetch_tickets?page=undefined' from origin 'http://localhost:8000' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.
quel modulo del sito web che sto cercando di recuperare i dati anche costruito in laravel. Ho creato middleware e l'ho applicato su rotte API. Ho aggiunto l'estensione Chrome Allow Cors
con la quale funziona bene ma non possiamo chiedere a tutti i clienti di utilizzare quell'estensione.
Accediamo a quell'URL da un altro sito Web che accede correttamente ai dati. solo l'app vue js che crea questi problemi.
Codice Vue
getTickets() {
axios.get( 'example.com/api/tickets/fetch_tickets?page=' + this.pagination.current, {
}).then((response) => {
// console.log(res.data.data)
// this.desserts = res.data.data;
// this.loadingprop = false;
this.desserts = response.data.data;
this.pagination.current = response.data.current_page;
this.pagination.total = response.data.last_page;
console.log(response.data.data);
}).catch((err) => {
this.handleErrors(err.response.data.errors);
})
.then(() => {
this.loading = false;
});
}
percorsi di altri siti web
Route::group(['middleware' => ['api','cors']], function () {
Route::group(['prefix' => 'tickets'], function () {
Route::post('/store_ticket_auth', 'TicketApiController@storeTicketAuth'); //enter ticket auth
Route::get('/fetch_tickets', 'TicketApiController@fetchTickets'); //get all tickets
Route::get('/fetch_replies/{ticket_id}', 'TicketApiController@fetchTicketReplies'); // get all replies by ticket id
Route::post('/send_reply', 'TicketApiController@sendTicketReply'); // Send reply
Route::post('/update_ticket', 'TicketApiController@updateTicketStatus'); // Update Status
});
});
Devo aggiungerlo anche al mio progetto cuurent?
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
Penso che il problema sia sul lato client, ma non so perché non funziona.
Ho provato tutte le risposte su StackOverflow ma non funziona nulla
Risposte
Devo aggiungere queste righe nel mio file index.php di laravel
header("Access-Control-Allow-Origin: *");
//header("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS");
header("Access-Control-Allow-Headers:*");
if ($_SERVER['REQUEST_METHOD'] == "OPTIONS") {//send back preflight request response
return "";
}
L'errore ti dice che il server non consentirà al client di utilizzare x-requested-with
un'intestazione.
In php puoi farlo per consentire al server di accettare quell'intestazione:
header('Access-Control-Allow-Headers: X-Requested-With');