如何解决 cors Allow Access control in vue js and laravel application

Question

我几乎什么都试过了。我的前端是用 vue js 开发的。后端位于 laravel。我们已经为我们试图从中获取数据的另一个网站编写了 api。如果直接访问该网站 Url 它会提供所有数据但是当我尝试使用 axios 从我的网站访问它时它会给我这个错误。

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.

我试图获取数据的那个网站表单也在 laravel 中构建。我已经创建了中间件并将其应用于 api 路由。我添加了 chrome 扩展程序 Allow Cors，它可以正常工作，但我们不能要求每个客户都使用该扩展程序。

我们从其他可以很好地访问数据的网站访问 url。只有 vue js 应用程序造成这些问题。

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

其他网站的路由


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

    });
});

我是否也需要将此添加到我当前的项目中？

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

我认为问题出在客户端，但不知道为什么它不起作用。

我尝试了 Whosebug 上的所有答案，但没有任何效果

Answer 1

您可以在 chrome

中禁用同源策略

按 win + R
然后复制这个：

chrome.exe --user-data-dir="C://Chrome 开发会话" --disable-web-security

Answer 2

错误告诉您服务器不允许客户端使用 x-requested-with header.

在 php 中，您可以执行此操作以允许服务器接受 header:

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

Answer 3

如果您想要简单的方法，可以使用 laravel-cors

您可以按照安装步骤将此代码添加到您的 config/cors。php

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

Answer 4

我必须在我的 index.php 文件中添加这些行 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 "";
}

Answer 5

通过注释解决了我的问题：

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

在resources/js/bootstrap.js

Answer 6

安装 Moesif Origin & CORS Changer Chrome 扩展和

然后到resources/js/bootstrap.js 把这一行注释掉// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

如何解决 cors Allow Access control in vue js and laravel application

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

api

middleware

cors

laravel

vue.js