用node转发请求解决Vue项目跨域问题

前端

2023-12-15 12:31:41

Vue项目开发中的跨域问题

在Vue项目开发过程中，接口跨域是一个很常见的问题。在开发时候可以用 vue 自带的 proxy 可以轻松解决。生产环境下，前端项目往往是部署在后端项目下，不会存在跨域的问题，接口前缀可以忽略。

问题来了，如果我们想在本地测试生产环境下的前端项目，会存在跨域的问题；发给后端部署...

解决方法：使用Node转发请求

使用Node转发请求可以轻松解决Vue项目中的跨域问题。

1. 安装Node.js

首先，你需要安装Node.js。你可以从Node.js官网下载安装包，或者使用包管理器（如npm或yarn）安装。

2. 创建Node.js项目

创建一个新的Node.js项目，并安装必要的依赖包。

mkdir my-node-project
cd my-node-project
npm init -y
npm install express cors

3. 创建Node.js服务器

在项目中创建一个server.js文件，并在其中创建了一个简单的Express服务器。

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

const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the Node.js server!' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

4. 启动Node.js服务器

使用以下命令启动Node.js服务器：

node server.js

5. 配置Vue项目

在Vue项目的vue.config.js文件中，配置代理服务器。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};