在需要调用接口的页面引入axios
此时不出意外控制台应该是报错了,应该是报的跨域的错,此时就要做一下对vuconfijs文件的配置
target:表示的是代理到的目标地址pathRewrite:默认情况下,我们的/api也会被写入到URL中,如果希望删除,可以使用pathRewrite如果你的接口中本身就带有/api可以不写pathRewritesecure:默认情况下不接收转发到https的服务器上,如果希望支持,可以设置为falsechangeOrigin:它表示是否更新代理后请求的headers中host地址
vuconfijs为什么要配置这么文件呢,配置这个文件的目的是什么呢?因为我们知道浏览器和服务器之间会存在跨域问题,但是两个服务器之间确实可以随意访问的,所以我们要配置一个代理服务器来调用用服务器的接口,如果你的前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到API服务器,此时可以通过vuconfijs中的devServer.proxy选项来配置。
devServer: {
port: '9080',
open: true,
proxy: {
'/api': {
target: 'http://192.168.2.108:9080/crm',//代理地址,这里设置的地址会代替axios中设置的baseURL
secure: false, //如果是https接口需要进行此配置
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/aaa' //如果没有pathRewrite属性 调用的接口就是http://cloud/api/xxx/xxxx 如果有 pathRewrite属性 调用的接口就是 http://cloud/aaa/xxx/xxxx
}
}
}
},
},
在开发阶段,本地地址为http://localhost:3000,该浏览器发送一个前缀带有/api标识的请求到服务端获取数据,但响应这个请求的服务器只是将请求转发到另一台服务器中
属性的名称是需要被代理的请求路径前缀,一般为了辨别都会设置前缀为/api,值为对应的代理匹配规则,对应如下:
首先要想调取后台接口一定要引入的就是axios,所以第一步就是下载axios
举个例子:
在代理服务器传递数据给本地浏览器的过程中,两者同源,并不存在跨域行为,这时候浏览器就能正常接收数据
发送请求
axios({
method: 'post',
url: '接口地址',
data: this.data,
headers: { 'Content-Type': 'multipart/form-data' },
}).then(e => {
console.log(e)
})
通过设置proxy实现代理请求后,相当于浏览器与服务端中添加一个代理者
所以在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求的问题
proxy实质就是一个代理服务器这样就能理解proxy工作原理实质上是利用http-proxy-middleware这个http代理中间件,实现请求转发给其他服务器
工作原理
devServer里面proxy则是关于代理的配置,该属性为对象的形式,对象中每一个属性就是一个代理的规则匹配
跨域
在开发阶段,devServer会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在localhost的一个端口上,而后端服务又是运行在另外一个地址上
说的再通俗一点就是A想认识C但是由于碍于面子(同源政策)只能通过B来介绍,也就是A发送请求给B再由B转发请求给C
话不多说直接开始
文章为作者独立观点,不代表股票交易接口观点