Vue项目中配置反向代理解决跨域问题

在Vue项目中，由于浏览器的同源策略限制，当请求其他域名下的资源时，会出现跨域问题。为了解决这个问题，我们可以通过配置反向代理来转发请求，从而绕过同源策略。以下是配置反向代理的步骤：

步骤一：安装代理插件
在Vue项目中，我们可以使用vue-proxy-config这个插件来管理代理规则。使用npm或者yarn进行安装：

npm install vue-proxy-config --save-dev

步骤二：创建代理配置文件
在Vue项目的根目录下创建一个名为proxy.config.js的文件，用于配置代理规则。在该文件中，我们需要定义一个代理规则对象，其中包含目标服务器地址、端口号、请求路径等信息。例如：

module.exports = {
  dev: {
    // 开发环境下的代理配置
    target: 'http://example.com', // 目标服务器地址
    changeOrigin: true, // 是否改变请求头中的Origin字段
    pathRewrite: {
      '^/api': '/api' // 将所有以/api开头的请求转发到目标服务器的/api路径下
    }
  },
  build: {
    // 生产环境下的代理配置
    target: 'http://example.com', // 目标服务器地址
    changeOrigin: true, // 是否改变请求头中的Origin字段
    pathRewrite: {
      '^/api': '/api' // 将所有以/api开头的请求转发到目标服务器的/api路径下
    }
  }
}

步骤三：修改vue.config.js文件
在Vue项目的根目录下找到vue.config.js文件，在该文件中引入刚刚创建的代理配置文件，并修改devServer选项的proxy字段，使其指向代理配置文件。例如：

module.exports = {
  devServer: {
    proxy: require('./proxy.config.js') // 引入代理配置文件
  }
}

步骤四：修改请求URL为代理路径
在Vue项目中，我们可以使用axios库来进行http请求。为了使请求能够通过代理转发，我们需要修改请求URL为代理路径。例如：

import axios from 'axios';
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 请求的基础URL，可以根据实际情况进行修改
  timeout: 5000 // 请求超时时间，可以根据实际情况进行修改
});
// 添加请求头信息，例如：Authorization、Content-Type等，可以根据实际情况进行修改
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么...
  return config;
}, function (error) {
  // 对请求错误做些什么...
  return Promise.reject(error);
});
export default instance;