come risolvere cors Consenti il ​​controllo degli accessi nell'applicazione vue js e laravel

Aug 22 2020

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 Corscon 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

1 webpakistan Aug 23 2020 at 14:10

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 "";
}
butttons Aug 22 2020 at 14:18

L'errore ti dice che il server non consentirà al client di utilizzare x-requested-withun'intestazione.

In php puoi farlo per consentire al server di accettare quell'intestazione:

header('Access-Control-Allow-Headers: X-Requested-With');