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

Question

免责声明 - 我在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请求后，前端成功接收为域“api.website.com”设置的XSRF-TOKEN cookie（secure = false，httpOnly = false，sameSite = Lax）（我也尝试了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的创建。我宁愿避免“代理”解决方案 - 合并我的域。

Answer 1

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