如何解决部署在Netlify的Node.js服务器被CORS阻止连接的问题？

我开发了一个React客户端应用，向自行编写的Node.js（V23.4.0）服务器请求图片。本地运行正常，但将服务器部署到Netlify后，所有请求均被CORS策略阻止。

我创建了两个应用的简化版本，并尝试了多种解决方案：

App.jsx（客户端） #

function App() {

    useEffect(() => {
        getServerResponse();
    });

    const getServerResponse = () => {
        axios.get("https://chambaserver.netlify.app/.netlify/functions/app:4000/test-response",
            {
                params: {
                    mytext: "Alexis response"
                }
            })
            .then(response => {
                if (response.status = 200) {
                    console.log(response.data);
                }
            })
            .catch((err) => {
                alert("GET ERROR: " + err);
            });
    }

    return (
        <div className="App" />
    );
}

app.js（服务器） #

const express = require('express');
const serverless = require("serverless-http");
const cors = require("cors");
const app = express();
const router = express.Router();

app.use("/.chambaserver/functions/app", router);
module.exports.handler = serverless(app);

app.use(express.static(__dirname + '../..'));

//Local client site (App.jsx)
const corsOrigin = 'http://localhost:5173';

//Use CORS package
app.use(cors({
    origin: [corsOrigin],
    methods: ['GET', 'POST'],
    credentials: true
}));

app.get('/test-response', (req, res) => {
    let myText = req.query.mytext;
    console.log(myText);
    return res.send("This is your message: " + myText);
});

//Start in port 4000
const port = 4000;
app.listen(port, process.env.IP, function () {
    console.log(`Server is running on port ${port}`);
});

已尝试的方案 #

• 使用cors npm包（代码中可见），尝试过带参数和无参数写法，结果一致。
• 在.toml文件添加CORS header，触发404错误。
• 为接口添加options处理代码，仍被CORS阻止：

app.options('/test-response', function (req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader('Access-Control-Allow-Methods', '*');
    res.setHeader("Access-Control-Allow-Headers", "*");
    res.end();
});

错误点及修正方案 #

1. 请求URL错误 #

客户端请求URL中的:4000端口号完全多余，Netlify函数部署后不需要指定端口，正确URL应为：

https://chambaserver.netlify.app/.netlify/functions/app/test-response

带端口的请求会直接返回404，浏览器会将404错误关联为CORS问题。

2. Express路由与Netlify函数路径不匹配 #

• 你将router挂载到了错误的路径"/.chambaserver/functions/app"，Netlify函数的标准路径是"/.netlify/functions/app"。
• 你直接在app上注册/test-response路由，没有挂载到router上，导致部署后该接口无法被Netlify函数正确识别。所有业务路由都应该注册到router实例上。

3. CORS配置范围过窄 #

仅允许http://localhost:5173作为跨域源，部署后的React客户端域名不在允许列表内，导致CORS拦截。需要添加生产环境客户端域名，或临时用*测试（生产环境务必指定具体域名）。

4. 中间件与代码顺序错误 #

• cors中间件应放在路由定义之前，否则无法作用到路由上。
• module.exports.handler = serverless(app)应放在所有中间件和路由配置的最后，否则部分配置不会被serverless实例加载。
• 本地启动代码应添加环境判断，避免部署到Netlify后重复执行。

修正后的服务器代码 #

const express = require('express');
const serverless = require("serverless-http");
const cors = require("cors");
const app = express();
const router = express.Router();

// 配置CORS，允许本地和生产环境域名
const allowedOrigins = [
  'http://localhost:5173',
  '你的生产环境React客户端域名' // 替换为实际地址
];
app.use(cors({
  origin: allowedOrigins,
  methods: ['GET', 'POST'],
  credentials: true
}));

// 将业务路由注册到router
router.get('/test-response', (req, res) => {
  let myText = req.query.mytext;
  console.log(myText);
  return res.send("This is your message: " + myText);
});

// 挂载router到Netlify函数的正确路径
app.use("/.netlify/functions/app", router);

// 最后导出serverless handler
module.exports.handler = serverless(app);

// 仅本地开发时启动服务
if (process.env.NODE_ENV !== 'production') {
  const port = 4000;
  app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
  });
}

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