如何解决如何在 Laravel 8 的 Angular 11 API 请求标头中设置 XSRF-TOKEN?
我将 Angular (11) frontend
集成到 Laravel 8
应用程序中。为了发出 API 请求,用户需要登录。每次前端 Angular 向后端 API 发出请求时,我都会收到以下错误:
Status Code: 401 Unauthorized
我设置了 VueJs frontend
来测试相同的 API 端点 URL,VueJs 可以访问 API 端点并从后端获得响应。当我将 VueJS 发出的 API 请求的 Request Headers
与 Angular 11 发出的请求进行比较时,我看到 Request Headers
的 Angular 11
没有 X-XSRF-TOKEN
。所以我认为这就是我收到上述错误的原因。
以下是如何在 Laravel 8 中设置 VueJs
和 AXIOS
以在 X-XSRF-TOKEN
中包含 API Request Headers
。
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;
}
如何在X-XSRF-TOKEN
内的X-CSRF-TOKEN
生成的API Request Headers
中设置Angular 11
或Laravel 8
?
注意:Angular 11 前端和 VueJs 前端都集成在 Laravel 8 应用程序的前端网页上,因此它们在同一个域中。所以我认为不需要 laravel-cors
包。
解决方法
要获取 XSRF 令牌,您必须使用包含标头 X-CSRF-Token 且值为 Fetch 的非修改性 HTTP 方法。仅当用户已通过身份验证时才会发出令牌。如果用户尚未通过身份验证,则此过滤器会拒绝任何带有修改方法的请求。有关 XSRF 保护的详细信息,请单击 here!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。