Next.js+BigCommerce API+React Query SSG下，API返回数据却出现CORS错误

问题原因 #

getStaticProps 在服务器端预取数据时能正常调用 BigCommerce API，但客户端 React Query 在页面 hydrate 后会自动发起后台刷新请求——这个请求是从浏览器直接发往 BigCommerce API 的，触发了跨域限制。另外，直接在客户端代码里携带 X-Auth-Token 属于严重安全问题：Token 会暴露给所有访问页面的用户，可能导致商店被恶意操作。

解决方案：用 Next.js API 路由做代理 #

所有 BigCommerce API 请求通过自身后端代理转发，浏览器仅请求同域名接口，既避免 CORS，又保护敏感凭证只在服务器端使用。

步骤1：创建代理 API 路由

在 pages/api 目录下新建 products.ts：

import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const response = await axios.get(
      'https://api.bigcommerce.com/stores/alw7i94qb0/v3/catalog/products',
      {
        headers: {
          'X-Auth-Token': process.env.BIGCOMMERCE_STORE_API_TOKEN!,
          // 若需要可添加 Client ID
          // 'X-Auth-Client': process.env.BIGCOMMERCE_STORE_API_CLIENT_ID!,
        },
      }
    );
    res.status(200).json(response.data);
  } catch (error) {
    res.status((error as any).response?.status || 500).json({
      error: (error as any).response?.data || '获取商品失败',
    });
  }
}

步骤2：修改数据获取逻辑

更新 API 配置代码，让请求指向代理接口而非直接调用 BigCommerce API：

import axios from "axios";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  // 请求自身代理接口
  const { data } = await axios.get(`/api/products`);
  return { data };
};

const usePosts = () => {
  return useQuery({
    queryKey: ["posts"],
    queryFn: () => fetchPosts(),
    // 可选：设置 staleTime 减少不必要的后台刷新，根据业务需求调整
    staleTime: 60 * 60 * 1000, // 1小时内视为新鲜数据，不自动刷新
  });
};

export { usePosts, fetchPosts };

步骤3：验证效果

现在无论是服务器端 getStaticProps 预取，还是客户端 React Query 的后台刷新，请求都会经过 Next.js 代理接口，不会触发 CORS，同时 Auth Token 仅在服务器端环境中使用，不会暴露给客户端。

额外说明 #

• React Query 的后台刷新是默认行为，用于保证数据新鲜度，可通过 staleTime 调整刷新频率，或用 cacheTime 控制缓存时长。
• 绝对不要在客户端代码中直接使用敏感凭证（如 API Token），必须通过后端代理转发请求。

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