React应用配置环境变量后API请求遭遇CORS跨域错误的解决方法

阿华AIGC实验室

2026-4-27

解决React中调用Edamam API的CORS错误与环境变量问题

先梳理下两个核心问题：环境变量配置语法错误和浏览器CORS跨域限制，我们逐个来解决：

1. 修正环境变量的写法

你的.env文件里的语法不符合React的要求——React环境变量不需要加引号和分号，否则这些符号会被当成变量值的一部分，从错误日志里的app_id=***;&就能看出来，参数里多了不该有的;。

正确的.env写法应该是：

REACT_APP_ID=123456
REACT_APP_KEY=abcde123

修改后必须重启React开发服务器（重新执行npm start），否则新的环境变量不会生效。

2. 解决CORS跨域问题

浏览器的同源策略会阻止前端直接请求第三方API，这是正常的安全限制，下面是几种可行的解决方法：

方法一：使用React开发服务器代理（推荐开发环境）

在项目根目录的package.json里添加proxy字段，指向Edamam的API域名：

{
  "name": "your-app-name",
  "version": "0.1.0",
  "proxy": "https://api.edamam.com",
  // ... 其他原有配置
}

然后修改你的fetch请求，去掉完整域名，只用路径即可：

const response = await fetch(`/search?q=${query}&app_id=${process.env.REACT_APP_ID}&app_key=${process.env.REACT_APP_KEY}`);

重启开发服务器后，React会自动把请求转发到Edamam的API，避开CORS限制。

方法二：搭建自己的后端代理（推荐生产环境）

生产环境不适合用React的开发代理，你可以用Node.js写一个简单的后端服务来转发请求，比如用Express：

创建一个新的Node项目，安装依赖：

npm install express node-fetch

编写转发接口：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const PORT = 5000;

app.get('/api/recipes', async (req, res) => {
  const { q } = req.query;
  const appId = process.env.REACT_APP_ID;
  const appKey = process.env.REACT_APP_KEY;
  
  const response = await fetch(`https://api.edamam.com/search?q=${q}&app_id=${appId}&app_key=${appKey}`);
  const data = await response.json();
  res.json(data);
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

前端请求改为调用自己的后端：

const response = await fetch(`http://localhost:5000/api/recipes?q=${query}`);

这种方式最安全，生产环境也能稳定使用。

方法三：使用公共CORS代理（仅临时测试用）

如果你只是临时测试功能，可以在API URL前加一个公共CORS代理，比如：

const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.edamam.com/search?q=${query}&app_id=${process.env.REACT_APP_ID}&app_key=${process.env.REACT_APP_KEY}`);

但注意这个服务是公共的，稳定性无法保证，绝对不要用在生产环境。