Laravel Angular CORS问题

Posted

技术标签:

【中文标题】Laravel Angular CORS问题【英文标题】:Laravel Angular CORS issue 【发布时间】:2019-02-05 19:37:15 【问题描述】:

我搜索了高低并尝试了几种解决方案,但我无法弄清楚这一点。我在本地工作 (MAMP)。

我有两个本地服务器,一个 Angular 前端服务器和一个 Laravel 服务器来处理请求并将数据 CRUD 回 Angular。

从 Laravel 服务器获取数据没有问题,当我尝试创建、更新或删除操作来更新服务器时,我不断收到 CORS 错误(原因:缺少 CORS 标头“Access-Control-Allow-Origin”) .我在 .htaccess 文件中设置了以下指令:

Header add Access-Control-Allow-Origin: *

Header add Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT

Header add Access-Control-Allow-Headers: Content-Type

我已经尝试实施这些解决方案,将 Laravel 的 CORS 标头响应添加到我的项目中,但我仍然没有成功:

https://github.com/barryvdh/laravel-cors

https://github.com/spatie/laravel-cors

我希望有人遇到过类似的问题并可以提供帮助。

【问题讨论】:

您找到解决方案了吗? 【参考方案1】:

这是在客户端发生的错误,因为服务器没有以正确的 CORS 值响应。 .htaccess 文件看起来不错,但请尝试在您的 Laravel 后端使用 php 添加标头。查看更多here。

return response(...)
  ->header('Access-Control-Allow-Origin', '*')
  ->header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');

如果所有端点都需要此功能,请考虑使用中间件。

编辑:我认为问题也可能出在您的 Allow-Headers 中。尝试将来源添加到您允许的标题中

->header('Access-Control-Allow-Headers', 'origin, x-requested-with')

【讨论】:

不知道怎么做,很抱歉打扰了,但是你能给我一些反馈意见吗?另外,对于延迟回复感到抱歉,我昨天大部分时间都生病了——感谢您的帮助。 没问题。响应是 Laravel 控制器中的标准 Laravel Response。 还要检查@leena-patels 的答案。我认为主要问题在于您的 Allow-Headers【参考方案2】:
Kernel.php command this codes in kernel.php

 protected $middleware = [
       ....
       \Fruitcake\Cors\HandleCors::class, 
     ];
 
 protected $routeMiddleware = [
         .....
         'cors' => \App\Http\Middleware\Cors::class,
     ];

【讨论】:

【参考方案3】:

这个 barryvdh cors 配置应该允许你允许一切

'supportsCredentials' => true,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
'exposedHeaders' => ['*'],
'maxAge' => 0,

还可以在 chrome 开发工具网络部分检查您的服务器响应。确保设置了标题。

【讨论】:

【参考方案4】:

第一次添加 Access-Control-Allow-Origin:在 api.php 中

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,

授权”); header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, PATCH");

将此代码添加到 laravel 服务器 api.php 文件中。

或在 Access-Control-Allow-Origin 中关闭您的切换。

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

【讨论】:

还要检查@ᴢʜᴀʀᴀ-ᴄᴏᴅᴇ-ᴋɪʟʟᴇʀ。我认为主要问题在我身上 你能说出主要问题吗 另外,很抱歉延迟回复,我病了很多 - 我感谢您的帮助。 没问题没问题。没问题。响应是 Laravel 控制器中的标准 Laravel 响应。【参考方案5】:

我一定是搞砸了 BarryVDH CORS 包的实现,因为在摆弄它之后它就解决了这个问题。

【讨论】:

以上是关于Laravel Angular CORS问题的主要内容,如果未能解决你的问题,请参考以下文章

即使在设置 CORS 标头和服务器响应之后,Angular 和 laravel 的 CORS 问题[重复]

Laravel 5 CORS 问题与 Ionic Angular

Angular 和 Laravel 授权标头 CORS 错误

Laravel + Angular 从外部网络访问被 CORS 阻止

身份验证中的 Laravel Angular CORS 问题

Angular 和 Laravel CORS 访问控制允许来源问题