CORS 错误：无法将图像从 Cloudflare 托管的客户端站点上传到 Heroku 服务器

Question

我已经被这个问题困扰了大约一个月，我真的很迷失。我看过每个 YouTube 视频、每个教程，但问题仍然存在。

我的目的是将图像从客户端站点（托管在 CloudFlare 上）上传到 Heroku 服务器。就是这样。现在，当我在本地托管站点时，这一切正常，但是当我从站点托管在“https://mysite.pages.dev”的 CloudFlare 进行调用时，我收到错误： （来源实际上是'https：'，忽略'http：'）

这是 Heroku 服务器上我的 CorsOptions 的代码

const cors = require("cors");
const corsOptions = {
    origin: "https://mysite.pages.dev",
    credentials: true,
    optionSuccessStatus: 200,
};
app.use(cors(corsOptions))

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

这是来自客户端网站的发出请求的代码（相信我，我已经 100 次检查 URL 是否完全相同，我只是用 x 替换名称）

axios({
    headers: { "Content-Type": "multipart/form-data" },
    method: "post",
    url: "https://xxx.herokuapp.com/test",
    data: formData,
    withCredentials: true,
})

顺便说一句，这些是来自 Heroku 服务器的日志，如果有帮助的话 🤷

我尝试像这样允许所有起源

app.use(cors())

但这只会产生相同的错误

Answer 1

没拍我终于找到问题了。

TLDR；我在 Heroku 服务器中保存上传内容的文件夹没有被 Git 跟踪，因为它是空的。在空文件夹中添加“.gitkeep”文件

因此，即使我定义了来源，但出现 503 错误且没有来源错误的原因是，当我请求上传文件时，它会尝试上传到“上传”文件夹，但该文件夹不存在，因此应用程序崩溃了（503错误意味着进程中断）

解决方案是向空文件夹添加一个文件，这样当我推送到 Git 时，它就不会因为它是空而忽略它。我在空的“uploads”文件夹中创建了一个“.gitkeep”文件，这解决了所有问题。我只是为那个可能在 7 年后会遇到同样场景的人保留这一点。