Vercel部署的MERN前端调用Railway后端时URL拼接异常求助

问题详情 #

前端托管在Vercel、后端部署在Railway的MERN应用，本地运行完全正常，后端通过Postman测试连接MongoDB、接口请求均符合预期，但Vercel上的前端发起请求时出现URL拼接错误：

• 预期请求URL：https://backend-production.up.railway.app/movements/
• 实际生成URL：https://client.vercel.app/backend-production.up.railway.app/movements

前端请求代码 #

const response = await axios(`${URL}/movements/`);

导入的URL变量值为backend-production.up.railway.app

问题原因 #

当URL仅填写域名（缺少https://协议头）时，浏览器会将其视为当前页面域名下的相对路径，因此自动拼接前端域名，导致请求地址错误。

解决方案 #

1. 修正后端URL格式：给URL变量加上完整的HTTPS协议头，修改为：

   const URL = 'https://backend-production.up.railway.app';
   

2. 配置后端CORS：确保后端允许前端域名跨域请求，避免URL正确后出现跨域报错。以Node.js/Express为例，使用cors包配置：

   const cors = require('cors');
   // 允许指定前端域名请求
   app.use(cors({ origin: 'https://client.vercel.app' }));
   // 若需同时允许本地调试，可传入数组：origin: ['https://client.vercel.app', 'http://localhost:3000']
   

内容的提问来源于stack exchange，提问作者Ema Rose