[JavaScript知识库]vue项目配置proxy反向代理

1、找到vue.config.js文件

在项目根目录下查找是否有vue.config.js，如果没有则手动创建，内容如下：

module.exports = {
  // devServer的配置
  devServer: {
    // 自定义端口
    port: 8888,
    // 自动打开浏览器
    open: true,
    // 用于配置反向代理
    proxy: {
      // 代理请求， 匹配所有以/api开头的请求
      '/api': {
        // 目标服务器，所有以/api开头的请求接口代理到目标服务器
        target: 'http://touxxxxxx.itheima.net/',
        // 重写路径，此时用于匹配反向代理的/api可以替换为空
        pathRewrite: { '^/api': '' },
        // 如果代理到HTTPS服务器需要设置secure为true，默认为false
        secure: true
      }
    }
  }
}

2、在request.js里配置

const request = axios.create({
  // baseURL: 'http://ttapi.xxxx.itcast.cn/',
  // baseURL: 'http://xxxxxx.itheima.net/',
  // 将所有的请求全部以/api开头，用于匹配反向代理
  baseURL: '/api',
  // 超时， 如果接口超过3000毫秒，直接失败
  timeout: 3000,
  }）

开发阶段才会使用proxy反向代理，线上项目一般是使用nginx来实现

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖