Next.js环境变量在Axios Patch请求中失效问题排查

问题概述 #

使用环境变量作为Axios Patch请求的URL及请求头参数时出现错误，已将handleSubmit函数迁移至api目录并绑定表单提交按钮，控制台抛出错误（附错误截图）。

现有代码 #

const axios = require("axios");

export const handleSubmit = async (formValue, uniquePageName) => {

await axios
  .patch(process.env.INTERNAL_RETAILER_CONFIG_UPDATE, formValue, {
    headers: {
        "Access-Control-Allow-Origin":process.env.INTERNAL_RETAILER_CONFIG_UPDATE,
        "x-auth-token":process.env.INTERNAL_TOKEN,
        retailername: uniquePageName,
        "Content-Type": "application/json",
    },
  })
  .then((res) => {
    return res.data;
  })
  .catch((error) => {
    console.log(error);
  });
};

核心问题与修复方案 #

1. 错误设置Access-Control-Allow-Origin请求头 #

Access-Control-Allow-Origin是服务器响应头，用于告知浏览器允许哪些域名跨域请求，客户端不需要在请求中手动设置这个头。强行添加会导致请求异常，直接删除该配置项即可。

2. 环境变量未正确加载验证 #

先确认环境变量是否被正确注入运行环境：

• 前端项目（如React/Vite）要求环境变量以REACT_APP_或VITE_开头，否则无法被客户端代码读取；
• 在函数开头添加日志验证变量是否存在：

  console.log("URL:", process.env.INTERNAL_RETAILER_CONFIG_UPDATE);
  console.log("Token:", process.env.INTERNAL_TOKEN);
  

3. async/await与.then()混用导致逻辑混乱 #

代码同时使用await和.then()，且外层函数未正确返回结果。统一使用async/await语法，同时在catch中抛出错误让调用方处理：

const axios = require("axios");

export const handleSubmit = async (formValue, uniquePageName) => {
  try {
    const res = await axios.patch(process.env.INTERNAL_RETAILER_CONFIG_UPDATE, formValue, {
      headers: {
        "x-auth-token": process.env.INTERNAL_TOKEN,
        retailername: uniquePageName,
        "Content-Type": "application/json",
      },
    });
    return res.data;
  } catch (error) {
    console.error("请求失败详情:", error.response?.data || error.message);
    throw error; // 抛出错误供调用方捕获处理
  }
};

4. URL格式与请求体验证 #

• 检查process.env.INTERNAL_RETAILER_CONFIG_UPDATE是否为完整URL（包含http/https前缀），若为相对路径需确认axios的baseURL配置正确；
• 确保formValue是可序列化的JSON对象，若为FormData则需移除手动设置的Content-Type，让axios自动处理请求头。

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