在浏览器的同源策略中,会阻止ajax的异步请求,在v-cli脚手架中可以在vue.config.js文件中配置项设置另一个服务器的地址,跨域请求是在一个页面中访问另一个页面的资源,放在当前页面。跳转不是异步请求,原本我们npm i axios
安装axios库,用axios来发送异步请求。但是直接写另一个服务器的地址,会受到浏览器同源策略的影响,导致另一个服务器向当前浏览器传递数据失败。我们可以用脚手架的配置项,实现当前服务器向另一个服务器访问,服务器和服务器没有同源策略,可以得到另一个服务器的数据。我们首先要安装axios库,能够发送ajax请求。
在vue.config.js的配置项中,
在当前文件写方法,调用axios的get方法,发送ajax请求。在哪浏览器上调用,就从这个浏览器向get内的服务器访问。如果写不是自己浏览器的服务器,都是不先返回,用自己的服务器去访问别的服务器。
在当前文件中为proxy可以是json/字符,字符只能访问一个。写的时候只写协议+域名+端口。会自动配除自己服务器的这个协议域名端口外的,所以不能写,前面axios的get方法无论写全部,还是/都可以。
第二种是proxy是json对象形式,前面配置项,要加‘’,写的是加过来的地址,开头有/,proxy的配置项的值是json,也只能配一个,target表示另一个服务器地址。可以‘’里面就写实际的第一个,也可以写一个不是服务器上的,然后取,pathRewirte配json对象,会将key转化为value,正则表达式形式写key,value。然后拿到的没有协议,域名,端口的地址做这个,可以只表示一部分进行换。可以写多个配置项在proxy。最后还是到一个里面去看。
,可以写ajax去访问其他浏览器的数据,实现数据动态。我们可以用axios库中的axios配置项去完成异步,也有一个也可以安装vue-source库,导入库中的vuesource配置项,Vue.use原本是调用插件的install方法,当vuesource写入时会给vm和vc都添加$http属性,和axios库中的axios配置项都有get能异步。
ajax请求可以在created后的钩子函数,用到数据。如果使用dom元素,在mounted,created。为了避免dom元素造成错误,一般放mounted