怎么做一款贷款网站,乐清微网站建设,做一个网站建设的流程,出口企业网站建设通过Vue自带服务器实现Ajax请求跨域#xff08;vue-cli#xff09;
跨域
原理#xff1a;从A页面访问到B页面#xff0c;并且要获取到B页面上的数据#xff0c;而两个页面所在的端口、协议和域名中哪怕有一个不对等#xff0c;那么这种行为就叫跨域。注意#xff1a;类…通过Vue自带服务器实现Ajax请求跨域vue-cli
跨域
原理从A页面访问到B页面并且要获取到B页面上的数据而两个页面所在的端口、协议和域名中哪怕有一个不对等那么这种行为就叫跨域。注意类似通过请求进行跨域的大部分情况下并不是发不出去也有可能是被浏览器拦截了。
为什么端口、协议和域名有一个不同就不能跨域
同源策略同源策略是一种约定它是浏览器最核心也最基本的安全功能如果缺少了同源策略浏览器很容易受 到 XSS、CSRF 等攻击。同源是指协议域名端口三者相同即便两个不同的域名指向同一个 ip 地址 也是非同源的。
实现方案需要安装axios 原理浏览器和浏览器之间避免不了同源策略但是通过服务器和服务器之间的传递是不需要同源策略的。 当在【页面】中点击【发送请求】则请求会去连接同在【8080服务器】再通过【8080服务器】的请求连接到【8081服务器】的程序【8081服务器】响应将数据传回【8080服务器】【8080服务器】响应将数据传到【页面】上
安装axios
原理是一种基于promise实现对ajax技术的一种封装可以满足于各种前端框架用于负责与后端交互get、post后端接口信息相当前后端的窗口。安装方法 打开CMD窗口通过命令跳转到当时安装Vue的文件路径中在窗口中输入npm i axios当出现added 6 packages in 2m就安装成功了 使用方法XXX.vue文件中在script/script的第一行输入import axios from axios即可如果你的axios安装时弄了一个文件夹存放的话那么将axios./文件名/axios)
启动Vue内置服务器8080的代理功能在vue.config.js中进行配置
第一种简单开启
原理优先从proxy的路径上去访问get(请求路径)的资源也就是拼接http://localhost:8000/请求路径如果没有找到资源则再从代理服务器上访问资源。缺点这种配置方法不适合支持配置多个代理。 这种单一的从8080端口8081端口当然可行但是还有8082、8083、8084…这么多端口每个配一遍就完了
// vue.config.js文件
devServer : {// Vue内置服务器8080端口proxy : http://localhost:8000
}
// XXX.vue文件
axios.get(/请求路径).then(response {// response.data:响应数据信息console.log(响应数据, response.data);},error {// error.message出现错误时显示错误信息console.log(错误信息, error.message);}
)第二种高级开启常用
devServer : {proxy : {// 凡事请求路径以/api开始的都走这个代理/api : {// 端口路径target : http://localhost:8000,// 重写/api路径pathRewrite : {^/api:},// 默认值true表示支持 websocketws : true,// 默认值true表示改变起源让目标服务器不知道真正的起源changeOrigin : true},/foo : {target : other_url}}}注意pathRewrite : {^/api:}原本是没有的可以自己添加用来重写’/api’路径 以上的意思是将’/api’路径改为空也就是请求路径前不用写’/api’
// XXX.vue文件
axios.get((如果没设置pathRewrite的话这里是要加上/api的)/请求路径).then(response {// response.data:响应数据信息console.log(响应数据, response.data);},error {// error.message出现错误时显示错误信息console.log(错误信息, error.message);}
)
