如何在Next.js中通过.env.local配置fetch的Authorization凭证

1. 保留.env.local配置（无需修改） #

LE_AUTH=MyBasic Credentials

注意：不要给这个变量加NEXT_PUBLIC_前缀，加了会被打包到客户端代码里，直接暴露凭证。

2. 创建API路由作为请求中间层 #

敏感凭证必须放在服务端处理，不能在客户端代码中出现。我们需要通过Next.js的API路由转发请求：

若使用Pages Router（旧版路由） #

在pages/api目录下新建reservations.js，编写服务端代码：

export default async function handler(req, res) {
  try {
    // 替换成你要请求的真实第三方API地址
    const targetUrl = "你的目标API地址";
    const response = await fetch(targetUrl, {
      headers: {
        Authorization: process.env.LE_AUTH,
        "Content-Type": "application/json",
      },
    });

    const data = await response.json();
    res.status(response.status).json(data);
  } catch (error) {
    res.status(500).json({ error: "请求转发失败" });
  }
}

若使用App Router（Next.js 13+） #

在app/api/reservations目录下新建route.js，编写服务端代码：

export async function GET() {
  try {
    // 替换成你要请求的真实第三方API地址
    const targetUrl = "你的目标API地址";
    const response = await fetch(targetUrl, {
      headers: {
        Authorization: process.env.LE_AUTH,
        "Content-Type": "application/json",
      },
    });

    const data = await response.json();
    return Response.json(data, { status: response.status });
  } catch (error) {
    return Response.json({ error: "请求转发失败" }, { status: 500 });
  }
}

3. 修改客户端组件的请求逻辑 #

把原来的第三方API请求改成调用自己的API路由，客户端无需处理Authorization：

import { useState, useEffect } from 'react';

export default function Reservations() {
  let [reservationStock, setReservationStock] = useState([]);

  useEffect(() => {
    fetch('/api/reservations')
      .then((response) => response.json())
      .then((result) => setReservationStock(result))
      .catch(error => console.error('获取数据失败:', error));
  }, []);

  // 这里写组件的渲染逻辑
  return <div>{/* 渲染库存数据 */}</div>;
}

核心原理 #

• 服务端的API路由代码不会被发送到浏览器，因此process.env.LE_AUTH只会在服务器环境中读取，不会暴露给用户。
• 客户端只和自己的API路由通信，完全接触不到敏感凭证，从根本上避免了泄露风险。

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