Laravel 7 Passport:被 CORS 策略阻止
Laravel 7 Passport : blocked by CORS policy
当我向我的 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 控制台中收到此错误:
Access to XMLHttpRequest at 'http://laravel.test/oauth/token' from
origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
此外,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,
];
我的请求有什么问题?
您的请求没有问题。您的 API 资源有一个 CORS policy 限制哪些域可以访问该资源。您遇到的错误是告诉您资源没有 CORS header 允许从调用域访问。
您需要设置 CORS 策略以将您的域列入白名单:http://localhost:3000
。您可能会发现这篇文章 Handling CORS in a Laravel Application 很有帮助:
Recently we released laravel-cors. This package can add the necessary CORS headers of your Laravel app.
这个解决方案在 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();
});
}
}
我通过编辑配置 config/cors.php
并在这一行中将 'oauth/*'
添加到 paths
数组解决了这个问题:
'paths' => ['api/*', 'oauth/*'],
然后在终端运行php artisan cache:clear
清算现金。
Note: config/cors.php
file exists in modern version of Laravel (after 2020)
当我向我的 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 控制台中收到此错误:
Access to XMLHttpRequest at 'http://laravel.test/oauth/token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
此外,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,
];
我的请求有什么问题?
您的请求没有问题。您的 API 资源有一个 CORS policy 限制哪些域可以访问该资源。您遇到的错误是告诉您资源没有 CORS header 允许从调用域访问。
您需要设置 CORS 策略以将您的域列入白名单:http://localhost:3000
。您可能会发现这篇文章 Handling CORS in a Laravel Application 很有帮助:
Recently we released laravel-cors. This package can add the necessary CORS headers of your Laravel app.
这个解决方案在 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();
});
}
}
我通过编辑配置 config/cors.php
并在这一行中将 'oauth/*'
添加到 paths
数组解决了这个问题:
'paths' => ['api/*', 'oauth/*'],
然后在终端运行php artisan cache:clear
清算现金。
Note:
config/cors.php
file exists in modern version of Laravel (after 2020)