Laravel 7 Passport:被 CORS 策略阻止

Posted

技术标签:

【中文标题】Laravel 7 Passport:被 CORS 策略阻止【英文标题】:Laravel 7 Passport : blocked by CORS policy 【发布时间】:2020-07-14 17:02:25 【问题描述】:

当我向我的 Laravel 7.3 Passport API 发出以下 axios 请求时:

let url = 'http://laravel.test/oauth/token'

let params = 
  client_id:  4,
  client_secret: 'FBkMiLI8ecdb4A8OhLRDGS1SasZP5NT7i9Qpp7bP',
  grant_type: 'password',
  username: 'me@home.com',
  password: '1qaz@WSX',
  scope: '*'


let headers = 
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type'
  

axios.post(url, params, headers)
.then(response => 
      this.access_token = response['data']['access_token'];
      this.get_users_data()
  )
.catch(response => 
// eslint-disable-next-line
    console.log(response)
);

我在我的 javascript 控制台中收到此错误:

从 'http://laravel.test/oauth/token' 访问 XMLHttpRequest 来源“http://localhost:3000”已被 CORS 策略阻止: 对预检请求的响应未通过访问控制检查:否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。

另外,Laravel 7.3 中的 config/cors.php 被配置为允许任何内容(默认情况下):

<?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,

];

我的请求有什么问题?

【问题讨论】:

您找到解决方案了吗?请也回答我的问题。 ***.com/questions/63422229/… 【参考方案1】:

这在 AuthServiceProviders.php 文件中对我有用的解决方案中,但在美学上并不正确:添加 api 前缀,以便 config/cors 完成它的工作,不要忘记添加它 use Illuminate\Support\ Facades\Route;

<?php

namespace App\Providers;

use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Route;
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider

    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        // 'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    
        $this->registerPolicies();
        Route::prefix('api')->group(function () 
            Passport::routes();
        );
    

【讨论】:

【参考方案2】:

您的请求没有问题。您的 API 资源有一个 CORS policy,它限制了哪些域可以访问该资源。您收到的错误是告诉您该资源没有允许从调用域访问的 CORS 标头。

您需要设置 CORS 政策以将您的域列入白名单:http://localhost:3000。您可能会发现这篇文章 Handling CORS in a Laravel Application 很有帮助:

最近我们发布了 laravel-cors。这个包可以为你的 Laravel 应用添加必要的 CORS 头文件。

【讨论】:

感谢您的回答。但是,我检查了 Laravel 中的config/cors.php,在我看来它被配置为允许任何 URL。我刚刚更新了关于 Laravel 的 CORS 配置的帖子。 是不是你的请求地址不在'paths' =&gt; ['api/*'],下? 确实,您似乎指出了问题所在,现在我只有“POST laravel.test/oauth/token 401 (Unauthorized)”作为错误消息。 laravel-cors 包已被放弃,因为 Laravel 7 带有第一放置的 cors 支持。但是,即使它来了,我仍然得到错误。有人请帮帮我。 ***.com/questions/63422229/… 有人可以在这里发布解决问题的代码吗?

以上是关于Laravel 7 Passport:被 CORS 策略阻止的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 7 CORS:被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin”

Express + Passport + CORS:允许多个域的会话

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

Laravel 5.7 在播种机中使用 Passport 进行测试

使用 Laravel Lighthouse 在 Laravel 7 中出现 CORS 错误

Laravel 7 中对 localhost:3000 的 CORS 支持