反向代理服务器ip
)代理去解决本地联调跨域的问题。 平时我们只知道使用,却不知道实现原理。有些人甚至连用都不会用。所以今天我们就来讲讲
我们在使用 vue-cli 工具生成 vue 项目后,都会生成一个配置文件,Vue-cli2.x 生成项目的配置文件路径是/config/index.js。而Vue-cli3.x以上生成项目的配置文件路径是
正常情况下,我们无法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回,没有给vue.
用代理服务器中转一下(vue请求的还是自己的后台,让后台去请求真是数据的后台,然后再将数据返回给vue)
首先,在ProxyTable模块中设置了‘/api’,target中设置服务器地址,也就是接口的开头那段地址,例如,然后我们在调用接口的时候,就可以全局使用/api,这时候/api的作用就相当于,比如接口的地址是,我们就可以使用/api/json.data
那pathRewrite是用来干嘛的呢,这里的作用,相当于是替代/api,如果接口中是没有api的,那就直接置空,如果接口中有api反向代理服务器ip,那就得写成{^/api:/api},可以理解为一个重定向或者重新赋值的功能。
proxyTable 就是webpack在开发环境给我们提供的一个代理服务器,(使用的是 http-proxy-middleware)
目的是为了在服务器不方便开启跨域功能的时候,我们也能方便的在开发阶段发送ajax跨域请求.
当了真实发布环境,这个玩意就不起作用了.除非自己配置一个代理服务器,或者让后台开启 cors