无法让 axios 在跨域请求中包含来自 cookie 的 CSRF 令牌答案

【问题标题】：Cannot get axios to include CSRF token from cookie in cross-domain request无法让 axios 在跨域请求中包含来自 cookie 的 CSRF 令牌
【发布时间】：2022-03-02 16:15:06
【问题描述】：

免责声明 - 我在 stackoverflow 上查看了很多类似的问题。

我有一个在“https://api.website.com”上运行的后端和一个在“https://admin.website.com”上运行的前端后端的 CORS 策略设置如下：

appCorsResourcePolicy = CorsResourcePolicy {
    corsOrigins        = Just (["http://localhost:8082", "https://admin.website.com"], True)
  , corsMethods        = ["OPTIONS", "GET", "PUT", "POST", "PATCH", "DELETE"]
  , corsRequestHeaders = ["Authorization", "Content-Type", "Cookie", "X-XSRF-TOKEN", "Origin", "X-Requested-With", "Accept",
                          "Accept-Language", "Content-Language"]
  , corsExposedHeaders = Just ["Set-Cookie", "X-XSRF-TOKEN"]
  , corsMaxAge         = Nothing
  , corsVaryOrigin     = True
  , corsRequireOrigin  = False
  , corsIgnoreFailures = False
}

对“https://api.website.com”执行 GET 请求后，前端成功接收到为 domain 设置的 XSRF-TOKEN cookie (secure = false, httpOnly = false, sameSite = Lax) “api.website.com”（我也试过 SameSite = None，secure = true）。现在，在向“https://api.website.com”发出 POST 请求时，我无法让 axios（或手动）将令牌从 cookie 添加到 X-XSRF-TOKEN 标头。以下是我尝试提出请求的方式：

declare module 'axios' {
  export interface AxiosRequestConfig {
    crossDomain?: boolean;
  }
}

const xsrfCookieName = 'XSRF-TOKEN'
const xsrfHeaderName = 'X-XSRF-TOKEN'

export const api = axios.create({
  baseURL: endpoint,
  timeout: 5000,
  xsrfCookieName,
  xsrfHeaderName,
  withCredentials: true,
  crossDomain: true
})

//...

export const postWarehouses = (warehouse: string) =>
  api
  .post('/admin/warehouses', warehouse, { withCredentials: true })

我还尝试从 cookie 中手动添加标头：

function attachCsrfToken(request: AxiosRequestConfig) {
  const csrfToken =
    ['POST', 'PUT', 'PATCH'].includes(request.method ?? 'GET') &&
    document.cookie &&
    document.cookie.length
      ? document.cookie.match(new RegExp(`${xsrfCookieName}=([^;]+)`))
      : {} as RegExpMatchArray
  if (csrfToken && csrfToken.length > 1) {
    request.headers[xsrfHeaderName] = csrfToken[1] ?? ''
  }
  return request
}

api.interceptors.request.use(attachCsrfToken)

显然，前端只能读取域“https://admin.website.com”上的 cookie。那我该怎么办？

我的后端设置了必要的标头：

access-control-allow-credentials: true
access-control-allow-origin: https://admin.website.com
access-control-expose-headers: Set-Cookie, X-XSRF-TOKEN

顺便说一句，我还控制 XSRF-TOKEN cookie 的创建。我宁愿避免“代理”解决方案 - 合并我的域。

【问题讨论】：

标签： cookies axios cross-domain csrf

【解决方案1】：

您是否尝试过测试问题是否仍然存在于移动设备上？我遇到了同样的问题，基本上是开发和生产 csrf 令牌冲突，这个问题只针对我，而不是用户，我通过删除 127.0.0.1、web.site 和 api.web 的所有 cookie 来解决它。网站

【讨论】：