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

Posted 2023-03-04

【中文标题】如何解决 cors 在 vue js 和 laravel 应用程序中允许访问控制

【英文标题】：how to solve cors Allow Access control in vue js and laravel application

【发布时间】：2020-12-11 16:21:19

【问题描述】：

我几乎尝试了所有方法。我的前端是用 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');

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

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

【问题讨论】：

- 在 public/index.php 的顶部添加以下两行： header("Access-Control-Allow-Origin: "); header("Access-Control-Allow-Headers:");

我正在使用 laravel

- 冒号后面有一个星号，因为它没有在上面的评论中显示

- 是的，在 laravel 中去公共文件夹并编辑 index.php 文件并在顶部添加以上两行。就这些

好的。我会在哪个项目上添加它？在我访问它的项目上。或数据来自的其他项目？源项目还是目标项目？

【参考方案1】：

安装Moesif Origin & CORS Changer Chrome 扩展和

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

【参考方案2】：

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

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

在资源/js/bootstrap.js中

【参考方案3】：

我必须在 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 "";

【参考方案4】：

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

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

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

【讨论】：

我需要在哪个项目上添加这个，我从哪个项目中获取数据或在我的项目上？

使用laravel的，接收者

源项目还是目标项目？

源项目

不工作似乎问题出在客户端..如果您直接在浏览器栏中访问该网址，它会显示数据

【参考方案5】：

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

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

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

【讨论】：

我正在使用 laravel 框架，已经在中间件中添加了这个但不能正常工作

【参考方案6】：

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

按win + R

然后复制这个：

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

【讨论】：

我不希望它只在我的电脑上工作，它也应该在服务器上工作

这不是一个真正的解决方案，因为这只对这样做的人有效。顺便说一句，这是一个糟糕的 hackfix。