[电子邮件受保护]中自动生成 X-XSRF-TOKEN 标头

Question

我对根据 XSRF-TOKEN cookie 的值填充 X-XSRF-TOKEN 标头，然后将请求发送到受信任的主机感到沮丧。

这个问题是由 axios 库 1.5.1=>1.6.0 中的重大更改引起的，其中自动填充减少到相同的源主机。

现在我在创建 axios 实例时添加了自定义逻辑

import axios from 'axios';
const instance = axios.create();
const hosts = ['https://example.com', 'https://api.example.com'];
instance.interceptors.request.use((config) => {
  if (hosts.some(host => config.url.startsWith(host))) {
    const token = getCookie('XSRF-TOKEN'); 
    if (token) {
      config.headers['X-XSRF-TOKEN'] = token;
    }
  }
  return config;
});

现在等待1.6.1，这样的逻辑可能会被实现。

你知道更好的解决方案吗？

Answer 1

如果您使用基本 url 发出所有请求，则可以确保 XSRF 令牌仅附加到使用基本 url 的请求。 相对路径将使用基本 url，而绝对路径则不会。

axios.defaults.baseURL = BACKEND_URL

const XSRF_TOKEN_HEADER_NAME = 'X-XSRF-TOKEN'
const XSRF_TOKEN_COOKIE_NAME = 'XSRF-TOKEN'

axios.defaults.xsrfHeaderName = XSRF_TOKEN_HEADER_NAME
axios.defaults.xsrfCookieName = XSRF_TOKEN_COOKIE_NAME

// Attach XSRF token to requests using the base url
axios.interceptors.request.use((config) => {
  if (!config.url?.startsWith('http')) {
    const token = getCookie(XSRF_TOKEN_COOKIE_NAME)
    if (token) {
      config.headers[XSRF_TOKEN_HEADER_NAME] = token
    }
  }
  return config
})

如何以正确且高效的方式读取cookie是另一个话题。