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

Asked By: Anonymous

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', '[email protected]'); //enter ticket auth
        Route::get('/fetch_tickets', '[email protected]'); //get all tickets
        Route::get('/fetch_replies/{ticket_id}', '[email protected]'); // get all replies by ticket id
        Route::post('/send_reply', '[email protected]'); // Send reply
        Route::post('/update_ticket', '[email protected]'); // 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

Solution

Answered By: Anonymous

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