当我向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: '[email protected]',
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,
];
我的请求出了什么问题?
您的请求没有问题。您的API资源有一个CORS policy,它限制了哪些域可以访问该资源。您收到的错误是告诉您该资源没有允许从调用域访问的CORS标头。
您需要将CORS策略设置为将您的域列入白名单:http://localhost:3000
。您可能会发现本文Handling CORS in a Laravel Application,很有帮助:
最近我们发布了laravel-cors。该软件包可以为您的Laravel应用添加必要的CORS标头。