how to solve cors Allow Access control in vue js and laravel application

问题

I Have tried almost everything. My front end is developed in vue js . backend is in laravel. we have written api for another website from which we are trying to fetch data. If directly access that website Url it gives all the data but when i try to access it from my website with axios it gives me this error.

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.

that website form which i am trying to fetch data also build in laravel. i have created middleware and applied it on api routes. I added chrome extension Allow Cors with which it works fine but we cant ask every client to use that extension.

We access that url from other website which is accessing data nicely. only vue js app creating these issue.

Vue Code

    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;
        });
}

other website's routes


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

    });
});

Do I need to add this on my cuurent project too?

return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

I think the issue is on client side but dont know why it is not working.

I tried all answers on stackoverflow but nothing works

回答1:

I have to add these lines in my index.php file of 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 "";
}

回答2:

The error is telling you that the server won't allow the client to use a x-requested-with header.

In php you can do this to allow the server to accept that header:

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

回答3:

you can disable same origin policy in chrome

press win + R
and then copy this :

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

回答4:

If you want the easy way you can use laravel-cors

You can follow the installation step and add this code in your config/cors.php

'allow_origins' => [
    'https://yourfrontendrequest.url',
],

来源：https://stackoverflow.com/questions/63537112/how-to-solve-cors-allow-access-control-in-vue-js-and-laravel-application

标签

laravel

api

Vue.js

cors

middleware