首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Laravel 8中设置Angular 11 API请求头中的XSRF-TOKEN?

如何在Laravel 8中设置Angular 11 API请求头中的XSRF-TOKEN?
EN

Stack Overflow用户
提问于 2021-04-12 18:56:12
回答 2查看 340关注 0票数 0

我在Laravel 8应用程序中集成了Angular (11) frontend。发出API请求时,用户需要登录。每次前端Angular向后端API发出请求时,我都会收到以下错误:

代码语言:javascript
运行
复制
Status Code: 401 Unauthorized

我已经设置了VueJs frontend来测试相同的API端点URL,VueJs可以到达API端点并从后端获得响应。对比VueJS发起的接口请求的Request Headers和Angular 11发起的请求,发现Angular 11Request Headers没有X-XSRF-TOKEN。所以我想这就是我得到上述错误的原因。

下面是如何在Laravel 8中设置VueJsAXIOS以将X-XSRF-TOKEN放在API Request Headers中。

代码语言:javascript
运行
复制
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
const token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common["X-CSRF-TOKEN"] = token.content;
}

Angular 11Laravel 8中制作API Request Headers时如何设置X-XSRF-TOKENX-CSRF-TOKEN

注意: Angular 11前端和VueJs前端都集成在Laravel 8应用的前端网页上,因此它们在同一个域名上。所以我认为laravel-cors包是不需要的。

EN

回答 2

Stack Overflow用户

发布于 2021-04-12 19:52:26

要获得XSRF令牌,您必须使用一个非修改的HTTP方法,该方法包含头X-CSRF-Token和Fetch值。仅当用户已通过身份验证时,才会颁发令牌。如果用户尚未通过身份验证,则此筛选器将拒绝任何具有修改方法的请求。有关XSRF保护的更多信息,请单击here

票数 0
EN

Stack Overflow用户

发布于 2021-10-13 09:40:00

代码语言:javascript
运行
复制
imports: [ HttpClientModule,HttpClientXsrfModule.withOptions({cookieName: 'My-Xsrf-Cookie',headerName: 'My-Xsrf-Header'})]; // headerName is optional
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67057145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档