React应用部署后连接Proxy Server出现网络错误的解决方法

我的React应用支持用户添加食材并获取营养数据，通过Proxy Server隐藏访问CalorieNinjas API所需的密钥。开发环境下运行完全正常，但部署到Firebase Hosting后，用户尝试添加食材时出现网络错误（错误表现为无法建立服务器连接，请求失败）。

部署时已将前端请求URL从http://localhost:8000/fetch改为实际域名https://nutrition-calculator.web.app:8000/fetch，但问题仍未解决，烦请帮忙排查。

前端请求函数代码 #

const fetchNutritionData = (ingredientName) => {
  const axios = require('axios');
  
  const options = {
    method: 'GET',
    url: 'https://nutrition-calculator.web.app:8000/fetch',
    params: { query: ingredientName },
  };
  
  return axios
  .request(options)
  .then((response) => {
    response.data.items[0];
    })
    .catch((error) => {
      console.error(error);
      setIsAPIConnectionDown(true);
    });
};

Proxy Server代码 #

const express = require('express');
const axios = require('axios');
const cors = require('cors');
require('dotenv').config();

const PORT = 8000;

const app = express();

app.use(cors());

app.get('/fetch', (req, res) => {
  const ingredientName = req.query.query;

  const options = {
    method: 'GET',
    url: 'https://calorieninjas.p.rapidapi.com/v1/nutrition',
    params: { query: ingredientName },
    headers: {
      'X-RapidAPI-Host': 'calorieninjas.p.rapidapi.com',
      'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
    },
  };

  return axios
    .request(options)
    .then((response) => {
      res.json(response.data);
    })
    .catch((error) => {
      console.error(error);
    });
});

app.listen(PORT);

排查方向及解决方案 #

1. Firebase Hosting不支持Node.js服务运行 #

Firebase Hosting是静态资源托管平台，无法直接运行你的Express Proxy Server。必须将Proxy逻辑迁移到支持Node.js的托管服务：

• 推荐使用Firebase Functions：将Proxy代码重构为云函数，触发路径改为云函数URL（格式示例：https://<region>-<project-id>.cloudfunctions.net/fetchNutrition）
• 也可选择其他平台（如Vercel、Heroku）部署Proxy Server，更新前端请求URL为对应平台的服务地址

2. 端口号配置错误 #

前端请求URL中指定了:8000，但部署后的生产服务默认使用HTTPS的443端口或HTTP的80端口，无需手动指定端口。需去掉URL中的:8000，改为标准HTTPS地址：

url: 'https://your-proxy-domain.com/fetch'

3. 环境变量未正确配置 #

Proxy Server中使用的process.env.REACT_APP_RAPID_API_KEY需在部署环境中正确设置：

• 若用Firebase Functions，通过命令行设置环境变量：

  firebase functions:config:set rapidapi.key="your-api-key"
  

  并在代码中修改为functions.config().rapidapi.key获取密钥
• 其他平台需在控制台对应位置配置环境变量，确保密钥能被正确读取

4. CORS配置需精细化 #

当前cors()允许所有跨域请求，生产环境建议限制为你的Firebase Hosting域名，避免潜在安全问题：

app.use(cors({ origin: 'https://nutrition-calculator.web.app' }));

5. 完善错误响应逻辑 #

Proxy Server的catch块仅打印错误，未向前端返回错误信息，导致前端无法定位具体问题。修改catch逻辑：

.catch((error) => {
  console.error(error);
  res.status(error.response?.status || 500).json({ error: error.message });
});

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