vue 接口代理proxy

在项目中本地开发调用接口的时候，访问的页面地址和接口请求地址的域名不一致，就会出现跨域 解决跨域的方法：

使用proxy 接口代理，适合前端在本地开发联调

devServer: {
    https: true, // 开启https模式
    // 配置服务器代理
    proxy: {
      '/api': { // 匹配访问路径中含有 '/api' 的路径
        target: 'http://localhost:3000/', // 测试地址、目标地址
        changeOrigin: true,
        ws: true, // 是否开启 webSocket 代理
        pathRewrite: { // 请求路径重写
          '^/api': '',   //重写请求路径
        },
      }
    }
  },

· '/api'表示告诉node只有使用/api开头的接口才使用代理

· pathRewrite对象的key值是一个正则表达式，value是替换后的路径
 

比如：
我们有一个请求 axios.get("/api/aa/bb/cc") ;
根据我们这里配置的 proxy， 带有 /api 的请求路径就需要进行代理，且 /api/aa/bb/cc 路径中含有 /api ，所以该请求就需要代理。
将路径当做字符串执行， "/api/aa/bb/cc".replace(/^\/api/, "")
执行结果： /aa/bb/cc
最终的请求路径变成了 http://localhost:3000/aa/bb/cc 不含/api；
 

2.如何发送请求 在项目中发送http请求使用axio，通常会封装一个request方法

定义一个基础路径
 
const request=axios.create({
    baseUrl:'a/b:9000'
})

//无论什么环境请求都会走baseUrl

request({
    url:'/aaa',
    method:'get',
    data:{},
})

3.配置不同环境的baseUrl

const request=axios.create({
    baseUrl:process.env.VUE_APP_BASE_API
})