SWR调用API时暴露Client-Id与Bearer令牌，如何隐藏以规避安全风险？

你当前直接在客户端侧通过SWR发起Twitch API请求，所有请求头内容必然会被浏览器开发者工具捕获，不存在任何在客户端侧隐藏这类请求信息的可行方案，这就是敏感信息泄露的核心原因。

核心思路是通过Next.js自带的服务端能力做API代理，所有Twitch请求的敏感凭证全部在服务端处理，前端完全不接触认证信息：

• 第一步：创建服务端代理API路由
  如果你用Pages Router，可创建pages/api/twitch/[...twitchPath].js动态路由文件，示例代码如下：

  import { getServerSession } from "next-auth/next"
  import { authOptions } from "../auth/[...nextauth]"
  
  export default async function handler(req, res) {
    // 先校验用户登录状态，未登录直接拦截
    const session = await getServerSession(req, res, authOptions)
    if (!session?.user?.accessToken) {
      return res.status(401).json({ error: "未授权" })
    }
    // 拼接Twitch请求路径
    const { twitchPath } = req.query
    const twitchUrl = `https://api.twitch.tv/${twitchPath.join('/')}`
    
    // 服务端发起请求，敏感凭证全部在服务端读取，不会暴露到前端
    const twitchRes = await fetch(twitchUrl, {
      method: req.method,
      headers: {
        'Client-Id': process.env.TWITCH_CLIENT_ID, // 服务端环境变量，无NEXT_PUBLIC前缀
        'Authorization': `Bearer ${session.user.accessToken}`
      },
      body: req.method !== 'GET' ? req.body : undefined
    })
    
    const data = await twitchRes.json()
    res.status(twitchRes.status).json(data)
  }
  

  如果你用App Router，用Route Handler实现相同逻辑即可。
• 第二步：修改前端SWR请求逻辑
  所有原来直接请求Twitch接口的调用，全部改为请求你自己的代理接口，前端不需要携带任何认证头，示例如下：

  // 原来的写法，会暴露敏感信息
  // const { data } = useSWR('https://api.twitch.tv/helix/streams', fetcherWithAuth)
  
  // 修改后的写法，前端无任何敏感信息
  const { data } = useSWR('/api/twitch/helix/streams', fetcher)
  

• 补充优化点
  • 所有Twitch敏感配置全部存放在服务端环境变量中，不要加NEXT_PUBLIC_前缀，确保不会被打包到前端静态资源里
  • 可在代理路由中增加请求频率限制、参数校验逻辑，避免代理接口被恶意滥用

警告：请将你的令牌视作密码管理，例如禁止将访问令牌用于任何公开URL，禁止在无需点击解密的网页上展示令牌
上述方案完全符合Twitch开发者条款要求，所有敏感凭证全程仅在服务端流转，前端无任何泄露风险。

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