MERN应用中通过.env导入服务器URL失败的问题求助

核心问题：环境变量命名不符合React规则 #

在Create React App（CRA）构建的前端项目中，自定义环境变量必须以REACT_APP_作为前缀，否则process.env无法读取到该变量。你使用process.env.URL自然会得到undefined，导致拼接出错误的请求地址。

修复步骤 #

1. 修改.env文件的变量名
   在项目根目录（与package.json同级）的.env文件中，将变量名改为带前缀的形式：

   REACT_APP_API_URL=https://你的服务器域名或IP地址
   

2. 在代码中正确读取变量
   调整代码中的变量读取逻辑：

   const API_URL = process.env.REACT_APP_API_URL;
   
   // 拼接请求地址
   `${API_URL}/api/users/login`
   

3. 重启开发服务器
   修改.env后必须重启本地开发服务器，否则新的环境变量不会生效。

更优实现方式 #

1. 封装Axios实例 #

将baseURL提前配置到Axios实例中，避免每次请求都手动拼接地址，还能统一处理请求/响应逻辑：
创建src/utils/api.js文件：

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});

// 可选：添加请求拦截器，自动携带登录token
api.interceptors.request.use((config) => {
  const user = JSON.parse(localStorage.getItem('user'));
  if (user?.token) {
    config.headers.Authorization = `Bearer ${user.token}`;
  }
  return config;
});

// 可选：添加响应拦截器，统一处理错误
api.interceptors.response.use(
  (response) => response,
  (error) => {
    // 示例：处理401未授权，自动清除用户信息并跳转登录页
    if (error.response?.status === 401) {
      localStorage.removeItem('user');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default api;

然后在登录组件中使用：

import api from '../utils/api';

const login = () => {
  setLoginError(null);
  api
    .post("/api/users/login", { email, password })
    .then((data) => {
      localStorage.setItem("user", JSON.stringify(data.data));
      navigate("/myportal");
      setLoggedIn(true);
    })
    .catch((err) => {
      setLoginError(err.response.data.error);
    });
};

2. 部署时的环境变量配置 #

如果部署到第三方平台（如Vercel、Netlify），需在平台项目设置中添加对应环境变量（变量名保持REACT_APP_API_URL）；如果自行部署静态文件，确保构建项目时环境变量已正确注入（执行构建命令时环境变量需存在）。

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