Question

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

import altair as alt
from vega_datasets import data
cars = data.cars()

highlight = alt.selection_single()
select = alt.selection_single(encodings=['x', 'y'])

chart = alt.Chart(cars).mark_rect().encode(
    x=alt.X('Miles_per_Gallon', bin=True), 
    y=alt.X('Horsepower', bin=True),
    color=alt.condition(highlight, 'count()', alt.value('lightgray'))
).add_selection(
    highlight, select
)

hist = alt.Chart(cars).mark_bar().encode(
    y='count()',
    x='Origin'
).transform_filter(select)

chart | hist

我在JavaScript控制台中收到此错误：

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

此外，Laravel 7.3中的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) });配置为允许任何操作（默认情况下）：

config/cors.php

我的请求出了什么问题？

Answer 1

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

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

最近，我们发布了laravel-cors。该软件包可以为您的Laravel应用添加必要的CORS标头。

Answer 2

这在AuthServiceProviders.php文件中对我有用的解决方案中，但从美学角度来看并不正确：添加api前缀，以便OneAuthZRoleAssignments起作用，请不要忘记添加{{1 }}

OneAuthZPreviousRoleAssignments

Laravel 7 Passport：被CORS政策阻止

2 个答案: