CORS错误：CloudFlare托管客户端无法向Heroku服务器上传图片

问题背景 #

本地环境下图片上传功能正常，但从CloudFlare托管的https://mysite.pages.dev站点发起请求时，出现CORS错误，提示“实际源为'https:'，忽略'http:'”，即使设置允许所有源也无法解决。

排查与解决方案 #

1. 移除客户端axios的多余Content-Type配置

当使用FormData上传文件时，axios会自动生成包含boundary的正确Content-Type头，手动设置反而可能导致请求格式异常，间接引发CORS问题。修改客户端代码：

axios({
    method: "post",
    url: "https://xxx.herokuapp.com/test",
    data: formData,
    withCredentials: true,
})

2. 改用动态Origin验证的CORS配置

固定字符串的Origin配置可能无法适配CloudFlare请求的特殊情况，改用函数动态验证并打印实际请求Origin，方便排查：

const cors = require("cors");
const corsOptions = {
    origin: function (origin, callback) {
        // 打印实际请求的Origin，在Heroku日志中查看
        console.log("请求Origin:", origin);
        // 允许指定站点和本地开发环境
        const allowedOrigins = ["https://mysite.pages.dev", "http://localhost:3000"];
        if (allowedOrigins.includes(origin) || !origin) {
            callback(null, true);
        } else {
            callback(new Error("Not allowed by CORS"));
        }
    },
    credentials: true,
    optionSuccessStatus: 200,
};
// 确保CORS中间件在所有路由和其他中间件之前加载
app.use(cors(corsOptions));

app.use("/test", require("./routes/test"));

3. 确认CORS中间件的加载顺序

必须保证cors中间件在express.json()、express.urlencoded()等解析中间件以及所有路由之前加载，否则请求可能在CORS头设置前就被处理，导致错误。

4. 用curl验证服务器CORS响应头

在本地终端执行以下命令，模拟CloudFlare站点的请求，检查服务器返回的CORS头是否正确：

curl -H "Origin: https://mysite.pages.dev" -I https://xxx.herokuapp.com/test

正常情况下，响应头应包含：

• Access-Control-Allow-Origin: https://mysite.pages.dev
• Access-Control-Allow-Credentials: true

5. 检查CloudFlare Pages设置

确认CloudFlare Pages的「自动HTTPS重写」「HSTS」等功能未篡改请求头，确保站点的HTTPS配置正常，无混合内容问题。

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