如何在 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！