Laravel 上的 CORS（访问控制允许来源）

Posted 2023-03-04

【中文标题】Laravel 上的 CORS（访问控制允许来源）

【英文标题】：CORS (Access-Control-Allow-Origin) on Laravel

【发布时间】：2016-12-09 12:43:13

【问题描述】：

我在 AngularJS 中创建了一个应用程序，我正在尝试调用 Laravel API：

MyApp (AngularJS)：

http://localhost:8080/

API（Laravel 样板）：

http://localhost:8000/

我将 Laravel API Boilerplate (JWT Edition) 用于 API。

但我在浏览器控制台中收到此错误：

XMLHttpRequest 无法加载 http://localhost:8000/api/auth/login。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://localhost:8080'。

我尝试在 api_routes.php 中应用 cors 中间件（barryvdh/laravel-cors），但错误仍然存​​在。

api_routes.php：

<?php

$api = app('Dingo\Api\Routing\Router');

$api->version('v1', ['middleware' => 'cors'], function ($api) 

    $api->post('auth/login', 'App\Api\V1\Controllers\AuthController@login');
    $api->post('auth/signup', 'App\Api\V1\Controllers\AuthController@signup');
    $api->post('auth/recovery', 'App\Api\V1\Controllers\AuthController@recovery');
    $api->post('auth/reset', 'App\Api\V1\Controllers\AuthController@reset');

    // example of protected route
    $api->get('protected', ['middleware' => ['api.auth'], function ()      
        return \App\User::all();
    ]);

    // example of free route
    $api->get('free', function() 
        return \App\User::all();
    );

);

【参考方案1】：

大多数 CORS 问题与服务器相关，如果 .htaccess 无法解决，您可以从应用程序启动文件中提供相同的标头。所以对域名有所了解，其中指向应用程序的文件夹路径。在 Laravel 中 index.php 是起始文件，所以使用以下代码行并添加起始行。

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");

加载网络应用程序需要在浏览器中清除缓存

【参考方案2】：

您可以在 kenel.php 中创建 Cors 中间件类并添加到应用程序的全局 HTTP 中间件堆栈中。此堆栈中的中间件将在对您的应用程序的每个请求期间运行。

试试this。

【参考方案3】：

根据您放置路线的位置，将此添加到 routes.php 文件或 api.php 文件的顶部：

header('Access-Control-Allow-Origin: http://localhost:8080');
header('Access-Control-Allow-Headers: origin, x-requested-with, content-type');
header('Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS');

在您发出请求的站点中添加这 3 行可以解决 CORS 问题。以上将允许在http://localhost:8080 上运行的JS 向包含上述行的后端发出请求。

答案的灵感来自@Dallas Caley 的回答。

【参考方案4】：

您应该添加一个 nginx 虚拟主机，并使用代理通行证指向您的 api。基本上你需要确保你的前端和后端都来自同一个域

【讨论】：

但我希望我可以放入不同的域。

【参考方案5】：

我不完全理解这一点，但是当我想要跨浏览器访问时，我将一个 .htaccess 文件添加到我的端点所在的文件夹中，其中包含以下内容：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

【参考方案6】：

我对这个实现完全错了。 origin 标头在 Laravel 中有特定的放置情况，其他标头可以在中间件中定义，origin 标头不能。

相反，您需要将其添加到主 routes.php 文件的顶部：

header('Access-Control-Allow-Origin: http://localhost:8080');

【讨论】：

嗨@Ohgodwhy 我试过这个，在你回答后再试一次，错误仍然存​​在。我不知道我的 AngularJS 应用程序中有什么我不需要更改任何内容好吗？

@MateusVitali 查看我的更新，我刚刚做了一些测试，我发现Origin 标头必须在您的routes.php 文件（或更早）中设置才能正确应用。可以在中间件的响应上设置其他标头。我还不是 100% 确定为什么，但这就是我发现的。试一试。

打印屏幕质量更好：s31.postimg.org/synyo4vrf/error.pngs31.postimg.org/4w74t9f4b/error2.jpg

@MateusVitali 我可以看到在响应中向您提供了标头，所以它正在工作！您能否检查并查看该 PHP 错误发生了什么并将其禁用？由于写入，它正在阻止服务器修改标头。