Vue 的跨域代理配置

1、在vue.config.js 中添加如下配置

 

module.exports ={

  transpileDependencies: true,

  lintOnSave: false,

  devServer: {

    proxy: { //配置跨域

      '/api': {

        target: 'http://localhost:80', //填写请求的目标地址

        // ws: true,

        changOrigin: true, //允许跨域

        pathRewrite: {

          '^/api': '' //请求的时候使用这个api就可以

        }

      }

    }

  }

 

}

 

'/api' 这里的配置为路径匹配项 代表凡是以/api 开头的请求都要走代理 举例为了从127.0.0.1:8080访问跨域服务 127.0.0.1:80/index/User/login 则在请求时不需要加域名直接将请求写为 /api/index/User/login 即可

 

target 表示当识别到/api开头的请求后访问的目标域名

 

changOrigin ture 代表开启代理

 

pathRewrite 代表路径重写 此时代表将路径 http://localhost:80/api/index/User/login 重写为 http://localhost:80/index/User/login 发送给跨域服务器