Docker化ReactJS调用RapidAPI遇CORS错误，求解决方案

问题原因 #

你本地开发时React应用跑在localhost:3000，RapidAPI的CORS配置仅允许该地址作为合法请求源；Docker部署后应用端口改为3003，浏览器发送请求时的Origin为http://localhost:3003，与RapidAPI允许的源不匹配，触发CORS拦截。

解决方法 #

方法一：修改RapidAPI的允许源配置 #

• 登录RapidAPI控制台，找到你使用的keto-diet API
• 进入API的「Settings」或「CORS」配置页面
• 在「Allowed Origins」列表中添加http://localhost:3003
• 保存配置后重新测试，CORS错误即可消除

方法二：用Nginx反向代理（Docker部署推荐） #

如果RapidAPI不支持自定义源配置，或需要更灵活的生产环境部署方案，可通过Nginx代理API请求规避跨域：

1. 在React项目根目录创建nginx.conf文件：

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理React路由刷新问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理RapidAPI请求
    location /api {
        rewrite ^/api(.*)$ $1 break;
        proxy_pass https://keto-diet.p.rapidapi.com;
        proxy_set_header Host keto-diet.p.rapidapi.com;
        proxy_set_header X-RapidAPI-Key YOUR_RAPIDAPI_KEY;
        proxy_set_header X-RapidAPI-Host keto-diet.p.rapidapi.com;
    }
}

替换YOUR_RAPIDAPI_KEY为你实际的RapidAPI密钥。

2. 修改React请求代码，将API地址改为相对路径：

const options = {
  method: 'GET'
};

fetch('/api/?protein_in_grams__lt=15&protein_in_grams__gt=5', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

3. 更新Dockerfile，使用Nginx作为部署镜像：

# 构建React应用
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 用Nginx部署
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4. 构建并运行容器：

docker build -t react-keto-app .
docker run -p 3003:80 react-keto-app

方法三：React开发服务器代理（仅本地调试用） #

如果只是临时测试，可在package.json中添加代理配置：

"proxy": "https://keto-diet.p.rapidapi.com"

然后将请求改为相对路径：

fetch('/?protein_in_grams__lt=15&protein_in_grams__gt=5', options)

注意：此方案仅在npm start的开发环境下生效，不适合生产部署。

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