vue前后端分离解决跨域问题

// 前端代码 (Vue.js)

// 在 Vue 项目中，可以通过配置代理来解决跨域问题。在项目的根目录下创建或修改 `vue.config.js` 文件：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 后端服务器地址
        changeOrigin: true,              // 允许跨域
        pathRewrite: {
          '^/api': ''                    // 重写路径，去掉 /api 前缀
        }
      }
    }
  }
};

// 解释说明：
// 1. `target`: 指定后端服务器的地址。
// 2. `changeOrigin`: 设置为 true 时，会改变请求的 origin，使其与目标服务器一致，从而允许跨域请求。
// 3. `pathRewrite`: 将前端请求中的 `/api` 前缀替换为空字符串，这样请求会直接发送到目标服务器的根路径。

// 后端代码 (Node.js + Express)

// 在后端服务器中，可以使用 CORS 中间件来处理跨域请求。安装并配置 CORS 中间件：

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

app.use(cors()); // 允许所有来源的跨域请求

app.get('/data', (req, res) => {
  res.json({ message: 'This is cross-origin data!' });
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});

// 解释说明：
// 1. `cors()`: 使用 CORS 中间件，默认情况下允许所有来源的跨域请求。如果需要限制特定域名，可以通过传递参数进行配置。
// 2. `app.get('/data')`: 定义一个简单的 API 接口，返回 JSON 数据。

总结：

• 前端：通过配置 vue.config.js 中的 devServer.proxy 来代理请求，避免浏览器的跨域限制。
• 后端：使用 CORS 中间件来允许跨域请求，确保前后端能够正常通信。