带有分组前缀的 nuxt 的 Laravel 7 cors 问题

Posted

技术标签:

【中文标题】带有分组前缀的 nuxt 的 Laravel 7 cors 问题【英文标题】:Laravel 7 cors problem for nuxt with grouped prefix 【发布时间】:2020-12-05 04:37:16 【问题描述】:

nuxt 和 laravel 7 Route::group 的新手

更新在这里打开了一个问题:

https://github.com/fruitcake/laravel-cors/issues/487

我的 laravel 和 cors 包版本:

- "fruitcake/laravel-cors": "^2.0",
- "laravel/framework": "^7.24",

我的 Api 路由

Route::group(['prefix' => 'auth', 'namespace' => 'Auth'], function () 
    Route::post('signin', 'SignInController');
    Route::get('me', 'MeController');
    Route::post('signout', 'SignOutController');
);

Route::group(['prefix' => 'snippets', 'namespace' => 'Snippets'], function () 
    Route::post('', 'SnippetController@store');
    Route::get('snippet:uuid', 'SnippetController@show');
);

auth 路由有效,但 sn-p 无效。

我的cors是这样的:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'api/snippets', '*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost:3000'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

我也试过了

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

在每次重试之前,我都使用了php artisan config:cache 命令。

Cors 错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/snippets. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这个请求http://localhost:8000/api/snippets/ 在邮递员中可以正常工作,但在 nuxt 中不行,我得到了 cors 错误。

谁能告诉我这里发生了什么?

谢谢

【问题讨论】:

【参考方案1】:

在 laravel 中使用 dd 或任何 log 函数都会影响 cors。

这是来自官网https://github.com/fruitcake/laravel-cors#echodie的引用

回声/死亡 如果您在代码中使用 echo()、dd()、die()、exit()、dump() 等,您将中断中间件流程。在标头之前发送输出时,无法添加 CORS。当脚本在 CORS 中间件完成之前退出时,不会添加 CORS 标头。始终返回正确的响应或抛出异常。

此代码将使其工作:

public function store(Request $request)
    
        $snippet = $request->user()->snippets()->create();

        return fractal()
            ->item($snippet)
            ->transformWith(new SnippetTransformer)
            ->toArray();
    

【讨论】:

以上是关于带有分组前缀的 nuxt 的 Laravel 7 cors 问题的主要内容,如果未能解决你的问题,请参考以下文章

带有 laravel sanctum 的 Nuxt 收到“未验证”消息

Laravel 分组路由啥是最好的前缀或中间件

使用 Nuxt 前端实现 Laravel 7 Passport 身份验证

Laravel分组路由什么是最好的前缀或中间件

使用 nuxt auth 和 laravel 护照登录时出现错误 404

带有动态前缀的 Laravel 动态路由