React项目Proxy正常但.env中REACT_APP_API_URL无法加载用户状态

可能的原因及排查修复步骤 #

1. 环境变量未正确加载 #

• 确认.env文件放在项目根目录（和package.json同级），不要放在src目录内。
• 严格检查变量名：必须以REACT_APP_开头，确认REACT_APP_API_URL拼写无大小写、下划线错误。
• 修改.env后必须重启React开发服务器，新环境变量才会生效——终端按Ctrl+C停止服务，再重新执行npm start。
• 验证变量是否生效：在LoadUser Action中添加console.log(process.env.REACT_APP_API_URL)，查看控制台输出的URL是否正确。

2. 跨域请求导致Cookie未携带 #

使用proxy时，React开发服务器会转发请求，属于同源请求，浏览器自动携带登录后的Cookie；换成直接访问http://localhost:4000后属于跨域请求，可能出现Cookie未携带、请求被拦截的情况：

• 后端配置CORS允许携带凭证（以Express为例）：

  app.use(cors({
    origin: "http://localhost:3000", // React项目的运行地址
    credentials: true
  }));
  

• 前端请求库开启携带凭证（以Axios为例）：

  // 全局配置
  axios.defaults.withCredentials = true;
  // 或单个LoadUser请求配置
  axios.get(`${process.env.REACT_APP_API_URL}/api/auth/user`, { withCredentials: true })
  

3. LoadUser Action的响应处理逻辑问题 #

对比登录Action和LoadUser Action的代码，排查响应处理差异：

• 检查后端返回的数据结构，比如登录接口返回res.data.user，但LoadUser接口返回res.data，此时Action中payload的取值路径要对应调整。
• 在Action中添加错误捕获和日志，定位问题：

  export const loadUser = () => async dispatch => {
    try {
      const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/auth/user`);
      console.log('LoadUser响应数据:', res.data);
      dispatch({
        type: USER_LOADED,
        payload: res.data // 确认此处路径与后端返回结构匹配
      });
    } catch (err) {
      console.error('LoadUser请求错误:', err.response?.data || err.message);
      dispatch({ type: AUTH_ERROR });
    }
  };
  

4. 后端LoadUser接口返回异常 #

用Postman直接调用http://localhost:4000/api/auth/user（带上登录后的Cookie），确认返回的用户数据和使用proxy时一致。如果返回未授权（401）或数据结构异常，需要排查后端接口的鉴权逻辑。

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