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

Question

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

- add following two lines in the top of public/index.php: header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers:*"); — Muhammad Sadiq, Aug 22 '20 at 14:21
- there is asteric after colon as it is not showing in the above comment — Muhammad Sadiq, Aug 22 '20 at 14:23
- yes, in laravel go to public folder and edit index.php file and add above two lines in the top. thats all — Muhammad Sadiq, Aug 22 '20 at 14:24
Ok. and on which project i would add it? on my project from where i am accessing it. or on other project from where data is coming? source project or desination project? — , Aug 22 '20 at 14:25
- from where the data is coming, in your case the data is coming from Laravel. — Muhammad Sadiq, Aug 22 '20 at 14:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/220271/discussion-between-muhammad-sadiq-and-web-pakistan). — Muhammad Sadiq, Aug 22 '20 at 16:18
If you are using Vuejs cli, following link can be useful: [Medium](https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3). — Ali Sohrabi, Dec 01 '20 at 13:49
I noticed that if there's an error from backend being returned as plain text then a CORS error will show since accepted/json is expected — PatricNox, Feb 08 '22 at 11:13

score 5 · Accepted Answer · answered Aug 23 '20 at 14:10

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

score 2 · Answer 2 · answered Feb 25 '21 at 06:17

2

Solved my issues by commenting out:

// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

in resources/js/bootstrap.js

answered Feb 25 '21 at 06:17

Amir Khalil

187
2
14

1

whoa, that's the ticket, thanks. :) – cookie Dec 28 '22 at 16:15

score 0 · Answer 3 · answered Aug 22 '20 at 14:18

0

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

answered Aug 22 '20 at 14:18

butttons

509
3
7

I am using laravel framework already added this in middleware but not working – Aug 22 '20 at 14:19

Adrian Edy Pratama · Answer 4 · 2020-08-22T14:23:36.003

-1

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',
],

edited Aug 22 '20 at 14:23

answered Aug 22 '20 at 14:19

Adrian Edy Pratama

3,841
2
9
24

on which project i need to add this , from which i am fetching data or on my project? – Aug 22 '20 at 14:21
The one that use laravel, the receiver – Adrian Edy Pratama Aug 22 '20 at 14:22
source project or desination project? – Aug 22 '20 at 14:25
the source project – Adrian Edy Pratama Aug 22 '20 at 14:27
Not working it seems like issue is on client side.. if you direct access that url in your browser bar it shows data – Aug 22 '20 at 15:27
but now error is change ```'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.``` – Aug 22 '20 at 15:33
if you're using the *, then 1 is enough, it's mean all URL can access it – Adrian Edy Pratama Aug 22 '20 at 15:34
maybe you can try some of the way to solve it from here https://github.com/fruitcake/laravel-cors/issues/63 – Adrian Edy Pratama Aug 22 '20 at 15:40
Now it is working a bit. when i make request first time it works but in next attempt it gives same error – Aug 22 '20 at 16:02
you know its pagination. first page appear when request for next page it gives error – Aug 22 '20 at 16:06

score -1 · Answer 5 · answered Apr 26 '21 at 12:45

-1

Install Moesif Origin & CORS Changer Chrome extension and

Then go to resources/js/bootstrap.js and comment out this line // window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

answered Apr 26 '21 at 12:45

Simon Angatia

688
1
10
16

score -3 · Answer 6 · answered Aug 22 '20 at 14:15

-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

answered Aug 22 '20 at 14:15

arman amraei

175
1
5

1

i dont want it to work only on my computer, it should work on server too – Aug 22 '20 at 14:18
This is not a real solution since this will only work for the person doing this. Which is a bad hackfix, by the way. – PatricNox Feb 08 '22 at 11:12

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

6 Answers6

Linked