React应用Vercel部署对接Render后端遭遇CORS错误求助

我将React客户端部署在Vercel平台，Express+Mongoose后端部署在Render平台。本地运行客户端时一切正常，但Vercel部署后出现CORS错误。已尝试启用全源CORS，也曾使用指定允许源的CORS配置，问题仍未解决。不同浏览器表现存在差异：Chrome页面空白且无网络请求记录，Arc、Safari和Firefox的网络标签页显示错误。

前端Axios配置 #

const axiosPublic = axios.create({
    baseURL: BASE_URL,
    headers: {
        "Content-Type": "application/json",
    },
});

后端最初的CORS配置 #

允许源列表文件 #

const allowedOrigins = [
    "https://rey-server.onrender.com",
    "https://reyfurnisher.vercel.app",
    "http://localhost:4000",
    "http://localhost:3000",
    "http://localhost:5000",
];

module.exports = allowedOrigins;

CORS选项文件 #

const allowedOrigins = require("./allowedOrigins");

const corsOptions = {
    origin: (origin, callback) => {
        if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
            callback(null, true);
        } else {
            callback(new Error("Not Allowed by CORS"));
        }
    },
    credentials: true,
    optionsSuccessStatus: 200,
};

module.exports = corsOptions;

server.js配置 #

app.use(cors(corsOptions));

后续尝试的修改 #

后来尝试直接启用全源CORS，修改server.js如下：

app.use(cors());

同时已提供网络标签页、响应头及请求头截图。

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