如何解决 vue js 和 Laravel 应用程序中 cors Allow Access control 的问题 [英] how to solve cors Allow Access control in vue js and laravel application

问题描述

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

从源http://localhost:8000"访问https://example.com/api/tickets/fetch_tickets?page=undefined"的 XMLHttpRequest 已被 CORS 策略阻止:请求标头字段预检响应中的 Access-Control-Allow-Headers 不允许 x-requested-with.

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

我们从其他网站访问该网址，该网站可以很好地访问数据.只有 vue js 应用程序创建了这些问题.

Vue 代码

 getTickets() {axios.get('example.com/api/tickets/fetch_tickets?page=' + this.pagination.current, {}).then((响应) => {//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;控制台日志(响应.数据.数据)；}).catch((错误) => {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');//输入票证Route::get('/fetch_tickets', 'TicketApiController@fetchTickets');//获取所有票Route::get('/fetch_replies/{ticket_id}', 'TicketApiController@fetchTicketReplies');//通过票证 id 获取所有回复Route::post('/send_reply', 'TicketApiController@sendTicketReply');//发送回复Route::post('/update_ticket', 'TicketApiController@updateTicketStatus');//更新状态});});

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

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

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

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

解决方案

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

<预><代码>标头(访问控制允许来源:*")；//header(Access-Control-Allow-Methods", DELETE, POST, GET, OPTIONS");标头(访问控制允许标头:*")；if ($_SERVER['REQUEST_METHOD'] == "OPTIONS") {//发回预检请求响应返回";}

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

解决方案

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

这篇关于如何解决 vue js 和 Laravel 应用程序中 cors Allow Access control 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！