如何使用Ngrok连接前后端与数据库？解决Express+Vue的CORS跨域报错

你的报错是典型的跨域资源共享（CORS）限制问题——前端http://localhost:8080和后端ngrok地址属于不同源，浏览器会拦截请求，除非后端返回Access-Control-Allow-Origin响应头。以下是两种直接有效的解决方法：

方法一：使用Express官方推荐的cors中间件 #

这是最简且规范的方式：

1. 安装cors依赖

   npm install cors
   # 或 yarn add cors
   

2. 在Express服务器中配置cors

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // 开发环境可直接允许所有来源（生产环境务必指定具体域名）
   app.use(cors());
   
   // 生产环境建议指定允许的前端域名，例如：
   // app.use(cors({
   //   origin: 'http://your-frontend-domain.com' // 替换为实际前端部署地址
   // }));
   
   // 你的/get_data路由
   app.get('/get_data', (req, res) => {
     // 这里写返回数据库数据的逻辑
     res.send({ status: 'success', data: 'your database content' });
   });
   
   app.listen(3000, () => {
     console.log('服务器启动在3000端口');
   });
   

方法二：手动设置响应头（无需额外依赖） #

如果不想安装中间件，可以通过全局中间件手动添加CORS相关头：

const express = require('express');
const app = express();

// 全局CORS中间件
app.use((req, res, next) => {
   // 允许localhost:8080跨域请求
   res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
   // 允许的HTTP方法
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
   // 允许的请求头
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
   // 处理OPTIONS预检请求
   if (req.method === 'OPTIONS') {
     return res.sendStatus(200);
   }
   next();
});

// 你的路由逻辑
app.get('/get_data', (req, res) => {
   res.send({ status: 'success', data: 'your database content' });
});

app.listen(3000, () => {
   console.log('服务器启动在3000端口');
});

注意事项 #

• 生产环境绝对不要直接允许所有来源（app.use(cors())），必须指定前端的实际域名，避免安全风险。
• 配置完成后重启Express服务器，再发起GET请求即可正常访问。

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