ReactJS外卖应用调用Swiggy API遇CORS问题求部署可用解决方案

方案1：React项目内置代理（Create React App/Vite） #

这是前端项目最常用的解决方案，无需额外服务器，部署后可配合托管平台配置生效。

Create React App 配置步骤：

1. 在项目根目录的package.json中添加代理配置：

"proxy": "https://www.swiggy.com"

2. 修改fetchData函数的请求地址为相对路径：

const fetchData = async () => {
    const data = await fetch(
        "/dapi/restaurants/list/v5?lat=18.97210&lng=72.82460&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"
    );
    const json = await data.json();
    // 后续逻辑保持不变
};

开发阶段React会自动将请求转发到Swiggy域名，规避CORS限制。部署到Netlify/Vercel等平台时，大部分会自动识别该代理配置并适配。

Vite 配置步骤：

若使用Vite，在vite.config.js中添加代理规则：

export default {
  server: {
    proxy: {
      "/dapi": {
        target: "https://www.swiggy.com",
        changeOrigin: true,
      },
    },
  },
};

同样将fetch地址改为相对路径即可。

方案2：自建Node.js反向代理服务器 #

需要更灵活的请求控制（如添加缓存、自定义请求头）时，可搭建轻量代理服务器：

1. 新建Node项目并安装依赖：

npm init -y
npm install express cors http-proxy-middleware

2. 创建server.js文件：

const express = require('express');
const cors = require('cors');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
app.use(cors());

// 代理Swiggy API请求
app.use('/dapi', createProxyMiddleware({
  target: 'https://www.swiggy.com',
  changeOrigin: true,
}));

app.listen(3001, () => {
  console.log('代理服务器运行在端口3001');
});

3. 启动服务器：node server.js
4. 修改React中的fetch地址：

const data = await fetch(
    "http://localhost:3001/dapi/restaurants/list/v5?lat=18.97210&lng=72.82460&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"
);

部署时将代理服务器与前端一同发布到Heroku、Railway等平台，前端请求替换为代理服务器的线上地址即可。

方案3：模拟移动端请求头（非长期稳定方案） #

Swiggy移动端API可能未严格限制CORS，可尝试在请求中添加移动端User-Agent：

const fetchData = async () => {
    const data = await fetch(
        "https://www.swiggy.com/dapi/restaurants/list/v5?lat=18.97210&lng=72.82460&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING",
        {
            headers: {
                'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1'
            }
        }
    );
    const json = await data.json();
    // 后续逻辑保持不变
};

注意：该方法依赖Swiggy的API策略，随时可能失效，不建议用于生产环境。

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