Vue3项目本地可获取MongoDB集合，域名环境无法实现求助

你的请求并未到达后端Express服务，而是被Vue的SPA路由捕获并返回了前端的index.html页面，这是线上部署时前后端路由配置冲突导致的。以下是具体解决步骤：

1. 确认部署架构并调整请求目标 #

• 如果前端和后端分开部署（不同域名/端口）：前端axios请求应直接指向后端服务的域名+端口，而非当前前端域名。例如后端部署在api.domainname.com，则请求改为：

  axios.get("https://api.domainname.com/api/blogpage/getarticles")
  

• 如果是同域名部署（前端静态文件与后端服务共享一个域名）：需要通过反向代理工具（如Nginx）将/api开头的请求转发到后端服务。

2. Nginx反向代理配置示例（同域名场景） #

若用Nginx托管前端静态文件，同时代理后端接口，添加以下配置：

server {
    listen 80;
    server_name www.domainname;

    # 托管Vue打包后的静态文件
    location / {
        root /path/to/your/vue/dist;
        try_files $uri $uri/ /index.html; # SPA路由 fallback 规则
    }

    # 转发/api开头的请求到后端服务
    location /api {
        proxy_pass http://localhost:5038; # 后端服务的本地地址与端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

配置后，所有/api开头的请求会被转发到后端Express服务，其余请求走前端静态文件。

3. 前端axios环境化配置 #

为避免本地与生产环境的请求路径差异，建议在Vue中配置axios的baseURL：

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: process.env.NODE_ENV === 'production' 
    ? '/api' // 生产环境用相对路径，依赖反向代理
    : 'http://localhost:5038/api' // 本地环境直接指向后端端口
})

export default axiosInstance

后续请求直接调用：

axiosInstance.get('/blogpage/getarticles')

4. 验证后端服务状态 #

• 登录线上服务器，执行curl http://localhost:5038/api/blogpage/getarticles，检查是否返回正确的MongoDB数据。若返回正常，说明后端服务无问题，问题出在请求转发环节。
• 查看后端日志，确认MongoDB连接是否正常、服务是否在5038端口监听。

5. 优化后端CORS配置 #

虽然已启用cors()，但线上环境可更精准配置以避免潜在问题：

app.use(cors({
  origin: ['https://www.domainname'], // 指定允许的前端域名
  credentials: true
}))

内容的提问来源于stack exchange，提问作者Emre Sabancı