上面的这个报错大家都不会陌生,报错是说没有访问权限(跨域问题)。本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题。下面先演示一个没有配置允许本地跨域的的情况:
可以看到,此时我们点击获取数据,浏览器提示我们跨域了。所以我们访问不到数据。那么接下来我们演示设置允许跨域后的数据获取情况:
我们在1出设置了允许本地跨域,在2处,要注意我们访问接口时,写的是/api
,此处的/api
指代的就是我们要请求的接口域名。如果我们不想每次接口都带上/api
,可以更改axios的默认配置axios.defaults.baseURL = '/api';
这样,我们请求接口就可以直接this.$axios.get('app.php" />
好了,最后附上proxyTable的代码:
proxyTable: {// 用‘/api’开头,代理所有请求到目标服务器'/api': {target: 'http://jsonplaceholder.typicode.com', // 接口域名changeOrigin: true, // 是否启用跨域pathRewrite: { //'^/api': ''}}}
注意:配置好后一定要关闭原来的server,重新npm run dev
启动项目。不然无效。
axios的封装,主要是用来帮我们进行请求的拦截和响应的拦截。在请求的拦截中我们可以携带userToken,post请求头、qs对post提交数据的序列化等。在响应的拦截中,我们可以进行根据状态码来进行错误的统一处理等等。axios接口的统一管理,是做项目时必须的流程。这样可以方便我们管理我们的接口,在接口更新时我们不必再返回到我们的业务代码中去修改接口。