Question

我已经搜索了很多问题，并尝试了几种解决方案，但是我无法弄清楚。我在本地（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

我希望有人遇到类似的问题并能为您提供帮助。

Answer 1

此barryvdh cors配置应允许您允许所有操作

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

还要在chrome开发工具网络部分中检查服务器响应。确保已设置标题。

Answer 2

这是在客户端发生的错误，因为服务器未使用正确的CORS值进行响应。 .htaccess文件看起来还可以，但是请尝试在Laravel后端中使用PHP添加标头。查看更多here。

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

如果所有端点都需要这样做，请考虑使用中间件。

编辑：我认为问题也可能出在您的“允许标题”中。尝试将原点添加到允许的标题中

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

Answer 3

<块引用>

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

$(function() {
    function breadcrumbAdjustment(){
        var screenWidth = $(window).width();
        var originalBreadcrumb = $('.breadcrumbs').clone();
        
        if (screenWidth <= 600) {
            $('.breadcrumbs').html('<li class="sidebar-toggle">mobile toggle goes here</li>');

            $('.sidebar-toggle').on('click', function() {
                $('#sidebar').fadeToggle("fast");
                $('.sidebar-toggle').toggleClass('open');
            });

        }
         
        
        else {
            $('.breadcrumbs').replaceWith(originalBreadcrumb);
        }
    };
    
    $(window).resize(breadcrumbAdjustment);
});

授权"); 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

或

<块引用>

Kernel.php 命令在 kernel.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,

Answer 4

我一定搞砸了BarryVDH CORS软件包的实现，因为摆弄了它之后，情况就解决了。

Laravel Angular CORS问题

4 个答案: