如何解决vue js和laravel应用程序中的cors允许访问控制

我几乎什么都试过了。我的前端是用vue js开发的。后端在拉威尔。我们已经为另一个网站编写了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扩展

允许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

    });
});

我需要在我的cuurent项目中也添加这个吗

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

我认为问题在客户方面，但不知道为什么它不起作用

---

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

您可以在chrome中禁用同源策略

按win+R

然后复制这个：

chrome.exe--user data dir=“C://chrome dev session”--禁用web安全性

---

您可以在chrome中禁用同源策略

按win+R

然后复制这个：

chrome.exe--user data dir=“C://chrome dev session”--禁用web安全性

---

该错误告诉您，服务器将不允许客户端使用

x-request-with

头

在php中，您可以这样做以允许服务器接受该标头：

header（'Access-Control-Allow-Headers:X-request-With'）；

错误告诉您，服务器将不允许客户端使用

x-request-with

头

在php中，您可以这样做以允许服务器接受该标头：

header（'Access-Control-Allow-Headers:X-request-With'）；

如果您想要简单的使用方法

您可以按照安装步骤在config/cors.php中添加此代码

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

---

如果你想用简单的方法

您可以按照安装步骤在config/cors.php中添加此代码

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

---

我必须在laravel的index.php文件中添加这些行

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

---

我必须在laravel的index.php文件中添加这些行

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

---

通过以下评论解决了我的问题：

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

---

在参考资料/js/bootstrap.js

中，通过评论以下内容解决了我的问题：

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

在参考资料/js/bootstrap.js中安装Chrome扩展和

然后转到resources/js/bootstrap.js并注释掉这一行

//window.axios.defaults.headers.common['X-request-With']='XMLHttpRequest'
安装Chrome扩展和

然后转到resources/js/bootstrap.js并注释掉这一行
//window.axios.defaults.headers.common['X-request-With']='XMLHttpRequest'
我不希望它只在我的计算机上工作，它应该在服务器上工作，我不希望它只在我的计算机上工作，它应该可以在服务器上运行。我正在使用laravel framework，已经在中间件中添加了它，但不工作。我正在使用laravel framework，已经在中间件中添加了它，但不工作。在public/index.php的顶部添加以下两行：header（“访问控制允许来源：”）；标题（“访问控制允许标题：”；我使用的是laravel-冒号后有星号，因为上面的注释中没有显示-是的，在laravel中，转到公用文件夹并编辑index.php文件，并在顶部添加以上两行。好的。我会在哪个项目上添加它？在我的项目上，我从哪里访问它。或者其他项目的数据来自哪里？源项目还是设计项目？-在public/index.php顶部添加以下两行：标题（“访问控制允许源：”）；标题（“访问控制允许标题：”；我使用的是laravel-冒号后有星号，因为上面的注释中没有显示-是的，在laravel中，转到公用文件夹并编辑index.php文件，并在顶部添加以上两行。好的。我会在哪个项目上添加它？在我的项目上，我从哪里访问它。或者其他项目的数据来自哪里？源项目或设计项目？我需要在哪个项目上添加此项，从哪个项目上获取数据，还是在我的项目上？使用laravel的项目、接收方源项目或设计项目？源项目不工作似乎问题在客户端。。如果您在浏览器栏中直接访问该url，它会显示我需要添加该url的项目、我从中获取数据的项目或我的项目的数据？使用laravel的项目、receiversource项目或Desiation项目？源项目不工作似乎问题在客户端。。如果您在浏览器栏中直接访问该url，它将显示数据