如何修复 Railway 上的 Express 后端和 Vercel 上的 Vue.js 前端的 CORS 错误和 502 预检问题？

Question

注意：我是node.js新手，这是我第一次在vercel和railway上托管网络

我正在构建一个投资组合网站，前端使用 Vue.js（托管在 Vercel 上），后端使用 Express（托管在 Railway 上）。我正在使用 Postman 从 frontend 向 backend 发出 API 请求，但我得到了这个：

{
    "status": "error",
    "code": 502,
    "message": "Application failed to respond",
    "request_id": "qRGtgXEgRh-ujLV1YFPJ3Q_2621307460"
}

向以下端点发出请求

https://lunarexpress.lunartechlab.com/api/send-mail

我的后端 CORS 配置如下

const express = require("express");
const cors = require("cors");
const app = express();
const corsOptions = {
  origin: "https://lunartechlab-zelino.vercel.app",
  methods: ["GET", "POST"],
  allowedHeaders: ["Content-Type"],
  credentials: true,
};
app.use(cors(corsOptions));
app.options("*", cors(corsOptions));

后端设置：

我已验证后端正在响应请求，但 CORS 问题和 502 预检错误仍然存在。 我使用 Express 来提供后端 API，并且使用 express.static 从 dist 目录中为前端提供服务。

app.use(express.static(path.join(__dirname, "../../vuejs/dist")));
// Serve the frontend application for all other requests
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../../vuejs/dist/index.html")); // Adjust the path
});

但不提供来自 vercel 上 dist 的请求，因为我的 vue vercel.json 如下所示：

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "https://your-api-endpoint.com" },
    { "source": "/(.*)", "destination": "/index.html" }
  ]
} 

我也不确定我是否应该在 vercel 中定义 api url，我的用于从客户端向服务器发送 api 请求的代码看起来像

import axios from "axios";

// register  a user
export const sendEmail = async (formData) => {
  try {
    const response = await axios.post(
      "https://lunarexpress.lunartechlab.com/api/send-mail",
      formData
    );
    return response.data;
  } catch (err) {
    throw err;
  }
};

Answer 1

http://localhost:5000/...

， 和科尔斯；像这样

const corsOptions = {
  origin: process.env.CLIENT_URL || "http://localhost:3000", // Frontend URL
};