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

Question

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

Status Code: 401 Unauthorized

我设置了VueJs frontend 来测试相同的 API 端点 URL，VueJs 可以访问 API 端点并从后端获取响应。当我将 VueJS 发出的 API 请求的 Request Headers 与 Angular 11 发出的请求进行比较时，我发现 Angular 11 的 Request Headers 没有 X-XSRF-TOKEN。所以我认为这就是我收到上述错误的原因。

下面是如何在 Laravel 8 中设置 VueJs 和 AXIOS 以在 API Request Headers 中包含 X-XSRF-TOKEN。

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 11在Laravel 8内API Request Headers中如何设置X-XSRF-TOKEN或X-CSRF-TOKEN？

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

Answer 1

要获取 XSRF 令牌，您必须使用包含带有值 Fetch 的标头 X-CSRF-Token 的非修改 HTTP 方法。仅当用户已通过身份验证时才会颁发令牌。如果用户没有被认证，任何带有修改方法的请求都会被这个过滤器拒绝。有关 XSRF 保护的更多信息，请点击here！

Answer 2

imports: [ HttpClientModule,HttpClientXsrfModule.withOptions({cookieName: 'My-Xsrf-Cookie',headerName: 'My-Xsrf-Header'})]; // headerName is optional