Question

我有Laravel框架，其中VueJS作为前端。该前端托管在xampp的本地服务器上的端口80,443上，配置的网址为“ http://test.net”。我使用axios将来自VueJS应用程序的API请求发送到Django后端，在该后端我已经安装了一个有效的Rest框架（可通过Postman访问）。后端服务器是http://127.0.0.1:8000。因为服务器不同，所以我安装了django-cors-headers软件包，并将settings.py文件配置为包括此软件包，还包括中间件，如文档所示。

这是来自Vue的axios请求：

let url = "http://localhost:8000/leadmanager/api/lead/";
axios.get(url)
    .then(res => console.log(res.data))
    .catch(error => console.log(error));

最初我收到此错误：

从原点“ http://localhost:8000/leadmanager/api/lead/”到“ http://test.net”处对XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-来源的标头出现在请求的资源上。

因此，我检查了文档并安装了django-cors-header，并将Laravel网站的URL包含在CORS_ORIGIN_WHITELIST中。

CORS_ORIGIN_WHITELIST = [
    "http://test.net"
]

这样做之后，我得到了另一个错误。我怀疑这是因为Laravel默认将x-csrf-token标头附加到要发送的数据包上。

CORS策略已阻止从源“ http://localhost:8000/leadmanager/api/lead/”访问“ http://test.net”处的XMLHttpRequest：请求标头字段x-csrf-token不允许访问控制标头字段中的Access-Control-Allow-Headers飞行前反应。

要允许带有x-csrf令牌的请求，我在settings.py中尝试了django-cors-headers的以下设置：

CORS_ALLOW_HEADERS = [
    'x-csrftoken'
]



CSRF_TRUSTED_ORIGINS = [
    'http://test.net'
]

那么我如何配置Django的后端以允许来自带有x-csrf-header的Laravel的请求？我想这样做而不必修改Laravel的设置以不附加这些标头，因为它们是Laravel为减轻CSRF攻击而实现的安全功能。

Answer 1

参考@ bak2trak指出的https://stackoverflow.com/a/32501365/10888237之后，我检查了Laravel应用程序从 Chrome开发者控制台（“网络”标签）发送的请求标头， “ x-csrf令牌和 x-requested-with ”。因此，我修改了CORS_ALLOW_HEADERS以添加“ x-requested-with”标头。

CORS_ALLOW_HEADERS = [
    'x-csrf-token',
    'x-requested-with'
]

它给出了另一个错误401 [未授权]，因此我删除了REST_FRAMEWORK的默认身份验证类。

现在，请求终于可以通过了，我从Django后端获得了对Laravel的GET请求的适当响应。

在飞行前响应中不允许Laravel前端到Django后端x-csrf-token

1 个答案: