应用重定向到Next.js页面后能否提取请求头？Intuit OAuth场景如何实现？

核心结论 #

• 你计划的「重定向时通过请求头传递access token」的方案不可行：浏览器处理3xx重定向时不会携带后端返回的自定义响应头，前端页面也无法直接读取当前页面的请求头内容。
• 你遇到的CORS问题可直接规避：不需要用axios发起请求到api/auth/qb，直接通过整页跳转（比如window.location.href = '/api/auth/qb'或者普通a标签跳转）触发授权流程即可，整页跳转不存在跨域限制。

可行实现方案 #

方案1：HttpOnly Cookie存储（生产环境优先推荐） #

这种方案不需要将token暴露给前端，可避免XSS泄露风险，实现逻辑如下：

1. 调整pages/api/auth/qb.ts逻辑，拿到intuit返回的access token后，将token写入HttpOnly Cookie，再重定向到仪表盘

// pages/api/auth/qb.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 省略授权回调时用code兑换access token的逻辑
  const accessToken = "从intuit接口获取的access token"

  // 写入HttpOnly Cookie，前端JS无法读取，仅后端可访问
  res.setHeader(
    'Set-Cookie',
    `qb_access_token=${accessToken}; HttpOnly; Path=/; SameSite=Lax; Secure=${process.env.NODE_ENV === 'production'}`
  )
  // 重定向到仪表盘
  res.redirect('/dashboard')
}

2. 后续所有需要调用intuit接口的请求，都通过你自己的Next.js API路由代理：前端发请求到你的后端接口，后端从Cookie中取出access token，再发起请求到intuit平台，返回结果给前端即可，全程token不会暴露给前端。

方案2：URL参数传递（符合你存localStorage的需求） #

如果你确定要将token存在localStorage中使用，可以通过重定向查询参数传递token，实现逻辑如下：

1. 调整pages/api/auth/qb.ts逻辑，拿到access token后拼在重定向URL的查询参数中

// pages/api/auth/qb.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 省略授权回调时用code兑换access token的逻辑
  const accessToken = "从intuit接口获取的access token"
  // 重定向时携带token参数
  res.redirect(`/dashboard?access_token=${encodeURIComponent(accessToken)}`)
}

2. 在dashboard页面读取查询参数，存入localStorage后清理URL参数

// pages/dashboard.tsx
import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function Dashboard() {
  const router = useRouter()

  useEffect(() => {
    // 等待路由参数加载完成
    if (!router.isReady) return
    const accessToken = router.query.access_token as string
    if (accessToken) {
      // 存入localStorage
      localStorage.setItem('qb_access_token', accessToken)
      // 清理URL中的token参数，避免留在历史记录中
      router.replace('/dashboard', undefined, { shallow: true })
    }
  }, [router.isReady, router.query, router])

  return <div>仪表盘内容</div>
}

注意：该方案token会暴露在URL中，会留在浏览器历史记录、服务器访问日志中，仅适合测试环境使用，生产环境请优先选择方案1。

内容的提问来源于stack exchange，提问作者Snape