当前位置: 首页 > Web前端 > vue.js

面试题Vue跨域

时间:2023-03-31 21:09:27 vue.js

Vue中的跨域解决方案什么是跨域跨域是指浏览器不允许当前页面的来源向其他来源请求数据。来源是指协议、端口和域名。只要这三者有一个不同就是跨域【JavaScript】纯文本查看_复制代码_?123456#协议跨域http:`//a.baidu.com访问https://a.baidu.com;`#端口跨域http:`//a.baidu.com:8080访问http://a.baidu.com:80;`#域名跨域http://a.baidu.com访问http://b.百度网;`第一个解决方案是更改服务器(后端)上的标头[JavaScript]纯文本view_copycode_?12res.header(`"Access-Control-Allow-Origin",``"*");//允许的域名`res.header(`"Access-Control-Allow-Methods",```"PUT,POST,GET,DELETE,OPTIONS");//允许的请求方式`第二种:Proxy原因是客户端向服务端请求数据时存在跨域问题,服务端与服务端可以互相请求数据,没有跨域的概念域(如果服务器没有设置禁止跨域的权限问题),也就是说,一台可以配置代理的服务器可以向另一台服务器请求数据,然后将请求的数据返回给代理服务器,代理服务器将数据返回给客户端,从而实现数据的跨域访问。打开config/index.js并在proxyTable中添加以下代码:[JavaScript]Plaintextview_copycode_?123456proxyTable:{'/mall'`:{`target:'http://www.abcd.com'`,`changeOrigin:true}},使用:[JavaScript]plaintextview_copycode_?12345678//productlistlist(listParams){return_http.request({type:'post'`,`url:'/mall/product/list.do'`,`data:listParams})}可以正常发送ajax或axios请求。第三种:jqueryjsonp[JavaScript]纯文本view_copycode_?123456789$.ajax({url:'address',`type:'GET',`dataType:'JSONP',`success:function(res){self.data=res.data.slice(0,3)self.opencode=res.data[0].opencode.split(`','`)}})