vue-cli3用axios+proxy简单解决在dev开发环境下的跨域问题
淘宝
http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp
苏宁
http://quan.suning.com/getSysTime.do
京东
https://a.jd.com//ajax/queryServerData.html
这几个都是各大平台的服务器时间接口。
一开始想着获取接口时间就直接axios.get就完事了
axios.get("http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp") .then(res => { console.log(res); }) .catch(err => { console.log(err); });
谁知道无脑报错
意思就是说没有请求头。
请求头是什么呢,在这我自己的理解是:
假设后端是屋子,api接口是大门,你是来访者,而请求头则是钥匙。
缺少请求头就是没有钥匙,开不了门进不去,而解决办法就是要么你配一把钥匙,要么后端设置不上锁(允许全部访问)。
而现在我改不了后端,那就只能自己去配一把钥匙了(整个请求头回来)
在这说一下,vuecli3和webpack配置是不一样的。所以挂代理的地方也是不一样
首先下载axios在开发环境下
npm install axios --save-dev
安装完成后在package.json会看到
vuecli3则是在根目录下创建vue.config.js文件
在里面复制粘贴,这是在dev开发环境下使用的proxy代理
module.exports = { devServer: { proxy: { //"/taobao"是你打算用的api接口名 "/taobao": { target: "http://api.m.taobao.com", // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 ws: true, //代理websockets pathRewrite: { // 路径重写, "^/taobao": "" // 替换target中的请求地址,也就是说以后你在请求http://api.taobao.com/xxx这个地址的时候直接写成/taobao/xxx即可。 } } } } };
打开main.js添加(这里我就直接全局设置了,以后可以整到指定的地方)
//导入 axios import Axios from "axios"; //在vue的原型中加个$axios方法,到时候就直接用 Vue.prototype.$axios = Axios;
然后就可以在你的.vue页面用axios了
我这就打开app.vue
methods: { getTbTime() { this.$axios //等同于.get(/taobao/rest/api3.do?api=mtop.common.getTimestamp) .get("/taobao/rest/api3.do", { params: { api: "mtop.common.getTimestamp" } }) .then(res => { console.log(res.data.data); }) .catch(err => { console.log(err); }); } }
这样就能正确获取接口问题了。
原理呢应该就是本地可以传给proxy代理服务器信息。
而服务器之间可以自由传递信息。所以就需要挂代理来传东西了。
但是这只是dev开发环境下使用。到build生产环境下就不可以这样使用了。