vue跨域问题

使用vue前端框架,一般都是前后端分离项目,这里呢就会涉及到跨域访问.

vue如何进行跨域访问呢.百度找了半天,都没有找到适合自己项目的方法

这里记录一下

在项目config目录下的index.js中,找到配置proxyTable,新项目proxyTable配置默认是空的.

如果需要跨域,就在此配置中新增参数,如下:

proxyTable: {

      '/api': {

        target:'http://127.0.0.1', // 你请求的第三方接口

        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

        pathRewrite:{  // 路径重写，

          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求https://xxxxxx/dictionary/data_dictionary_front.json这个地址的时候直接写成/api即可。

        }

      }

    },

配置了之后呢,可以直接去我们页面中直接进行跨域请求了.

我需要跨域的请求也是本地,但是端口是80,而我vue的服务器端口为8080

在helloWorld.vue中写到:

axios({

        method: "get",

        url: "/home/getHomeData",

      }).then(function (res) {

        console.log(res.data);

      });

可以直接拿到跨域该接口数据

vue项目访问地址为:http://127.0.0.1:8080/api/home/getHomeData

接口实际地址:http://127.0.0.1/home/getHomeData

 

这里是通过代理轻松拿下数据,但是涉及到多接口项目,该怎么实现呢.

 

 

-------------------还没研究------------------