如何在Next.js前端直接调用需认证后端服务并传递Authorization头？

可行性说明 #

完全可行，但要重点关注令牌安全风险——前端属于公开运行环境，令牌一旦泄露可能被恶意利用，因此必须确保令牌是短期有效、权限最小化的（仅授予前端所需的接口访问权限），同时做好跨域（CORS）配置，让后端允许你的Next.js前端域名发起请求。

获取认证令牌的常见方式 #

1. 通过Next.js认证库（如NextAuth.js）获取

如果你的Next.js应用用NextAuth.js做用户认证，前端可直接通过其钩子从会话中提取令牌：

import { useSession } from "next-auth/react";
import axios from "axios";

const fetchProtectedData = async () => {
  const { data: session } = useSession();
  if (!session?.accessToken) {
    console.error("未获取到认证令牌");
    return;
  }

  try {
    const res = await axios.get("https://your-existing-backend.com/api/protected", {
      headers: {
        Authorization: `Bearer ${session.accessToken}`
      }
    });
    console.log(res.data);
  } catch (err) {
    console.error("接口请求失败", err);
  }
};

NextAuth.js会在用户登录后将令牌存储在会话中，前端通过useSession可安全获取（前提是你在认证配置中已获取并保存OAuth2的access_token）。

2. 从非HttpOnly Cookie中读取

如果认证流程将令牌存在非HttpOnly的Cookie中（HttpOnly Cookie前端无法读取），可直接解析document.cookie获取：

import axios from "axios";

const getTokenFromCookie = () => {
  const cookies = document.cookie.split("; ").reduce((acc, cookie) => {
    const [key, value] = cookie.split("=");
    acc[key] = decodeURIComponent(value);
    return acc;
  }, {});
  return cookies.accessToken;
};

const fetchData = async () => {
  const token = getTokenFromCookie();
  if (!token) return;

  const res = await axios.get("https://your-existing-backend.com/api/protected", {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
};

⚠️ 注意：非HttpOnly Cookie存在XSS攻击风险，建议配合Secure（仅HTTPS传输）、SameSite（限制跨站发送）属性降低风险。

3. 从前端存储（如localStorage）读取

不推荐，但临时测试场景可将令牌存在localStorage中：

import axios from "axios";

const fetchData = async () => {
  const token = localStorage.getItem("accessToken");
  if (!token) return;

  const res = await axios.get("https://your-existing-backend.com/api/protected", {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
};

⚠️ 风险提示：localStorage易受XSS攻击，令牌泄露后攻击者可直接冒用用户身份，仅适用于无敏感数据的测试场景。

关键注意事项 #

• 必须配置后端CORS规则，允许你的Next.js前端域名（如https://your-nextjs-app.com）发起跨域请求，否则浏览器会拦截请求。
• 令牌需设置较短过期时间，同时实现前端自动刷新逻辑（比如用refresh_token请求新的access_token）。
• 高权限敏感接口仍建议通过Next.js后端代理转发，减少令牌暴露风险。

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