2020-05-23 vue使用axios进行跨域请求（vue-cli4.x + axios跨域）

1.新建vue.config.js文件

vue.config.js是总个webpack的配置表，它会把里面的配置传送给node服务器，在vue根目录下新建一个vue.config.js文件，当我们服务启动的时候，这个配置表会注册到webpack里面去的。webpack里面有node.js的中间件，因此会被注册到里面去，从而启动我们node.js里面的服务。

因为node遵循的是COMMONJS规范，这时，我们使用module.exports方法

module.exports = {
      devServer:{                //记住，别写错了devServer
        host:'localhost',        //设置本地服务器   选填
        port:8080,              //设置本地默认端口  选填
        proxy:{                 //设置代理，必须填
          '/api':{              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
            target:'http://t.yushu.im',     //代理的目标地址，这是豆瓣接口地址网址
            changeOrigin:true,              //是否设置同源，输入是的
            pathRewrite:{                   //路径重写
              '/api':''                      //路径转发代理 /api 的意思就是 用/api 代替http:localhost：8080
            }
          }
        }
      }
}

代理原理
我们想要访问的目标接口地址是 http://t.yushu.im/v2/movie/in_theaters
现在，我们把这串地址的 http://t.yushu.im 这部分用拦截器 /api 替代，也就是说，当服务器启动的时候，在文件中读取到 ‘ /api ’ 这串字符串的时候，会变成 http:localhost/8080/api/v2/movie/in_theaters，而此时路径重写设置为忽略拦截器的名字，也就是说不包含拦截器的名字，因此，访问路径会变成这样，是这样 http:localhost/8080/v2/movie/in_theaters，最后，路径就成功伪装成与豆瓣网的亲戚啦，顺利闯过了浏览器的关卡啦，就可以正常获取到数据啦。

2.拼接接口地址，调用远程数据

在组件中使用axios调用远程接口，注意，使用‘/api’代替目标主地址

  created(){
      // 使用  /api  代替  http://t.yushu.im
      this.$axios.get('/api/v2/movie/in_theaters').then(res=>{
          console.log(res);
      })
  }

==================这个分隔符======================

关于axios原理的说明文档：
https://juejin.im/post/5d1cc073f265da1bcb4f486d

1、创建vue.config.js文件。

vue-cli4.x 中默认是没有这个文件的，可以在项目的根目录新建一个，并命名为 vue.config.js

image.png

添加代码：

module.exports = {

    devServer: {
      proxy: {  
        '/api': {
          target: 'http://web.h5.com',   //路径指向本地主机地址
          port:80,     //端口号
          //ws: true, 
          changeOrigin: true,
          pathRewrite:{
              '^/api': '/data/api'   // 这个的实际路径为关键字 /api = /api + /data/api = http://web.h5.com/data/api
          }
        }
      }
    }
}

页面代码

                this.$axios.get(
                    "/api/index.php",
                    {
                        user:'test',
                        pwd:'demo'
                    }
                ).then(result => {
                        var res = result.data;
                         console.log(result);
                        this.dataList = res.result;
                      }).catch(error=>{
                        console.log(error);
                });

npm run serve 重启

image.png

注：配置完成后需要退出重启，不然可能会有报错