vue 使用 devServer 代理实现 Axios跨域请求

devServer  实现纯前端配置代理解决axios跨域 

注：devServer 只在 开发环境 有效   

如果实现 编译后跨域  可采用 nginx代理的方法 可参考：https://www.cnblogs.com/hailexuexi/p/14934166.html

一、在 vue.config.js 中  加入下面代码

//-----------------------Axios跨域请求-----------------------------------------
  devServer:{
    port:4000,//vue网页访问的端口
    host:"127.0.0.1",//vue网页访问的地址
    https:false,
    open:false,
    proxy: {
        '/sina': {  //为用于替换的的标识字符串
            target: 'http://192.168.1.5',//Axios跨域请求的IP
            changeOrigin: true, 
            ws: true,
            pathRewrite: {
                '^/sina': '' //不用改
            }
        },
         
        '/phpUrl': {  //为用于替换的的标识字符串
          target: 'http://192.168.1.8:8080/VueApi',//Axios跨域请求的IP
          changeOrigin: true, 
          ws: true,
          pathRewrite: {
              '^/phpUrl': '' //不用改
          }
       }  
    }
}

二、在请求中这样写

    //获取users列表--------------Sina API--Axios跨域 Post请求----------
     this.$axios.get('/sina/api/users')
          .then(function (response) {
            //console.log(response);
            let { statusText, data } = response.data;//解析JSON
            //console.log(data);
             
      }.bind(this))
      .catch(function (error) {
        console.log(error);
      });

目的：

将   this.$axios.get('/sina/api/users')  中的  /sina   变成  http://192.168.1.5

现实   this.$axios.get(' http://192.168.1.5/api/users')  

 

感谢原作者：wh_xmy

https://blog.csdn.net/wh_xmy/article/details/87705840