最近终于要迈出新的一步了,去面试了一个公司,问到了一个问题是如何解决跨域问题?
因为之前看了一点,还是这自己的地盘记下来,省的每次都要去别人那里看。
这部分内容主要来自廖雪峰老师的网站中关于ajax讲解的部分:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000
跨域的问题归根于浏览器的同源策略: 协议不同(http/https)、域名不同、端口不同,都会违反这一策略。所以对于请求外域的url就会报错。解决办法:
1、用flash插件发送HTTP请求,这种方式可以绕过浏览器的安全限制,但必须安装Flash,并且跟Flash交互。不过Flash用起来麻烦,而且现在用得也越来越少了。----我还没用过这种方法
2、在同源下架设一个代理服务器,js把请求发送至代理服务器,由服务器进行转发并将得到的结果返回,我们拿到数据以为是从自己同源下拿到的,所以浏览器不会拦截。vue有个插件axios就是用的这个方法。---这应该是反向代理。
3 jsonp方式
<script src="xxxx"></script>
script标签可以引入各个地方的资源,利用这一点可以进行跨域请求。
一般地,在页面底部引入一段script,里面会动态的生成一个script标签并添加到head中。
要发送的请求就是src的内容,返回的结果在callback后的函数refreshPrice处理。
function refreshPrice(data) {
var p = document.getElementById('test-jsonp');
p.innerHTML = '当前价格:' +
data['0000001'].name +': ' +
data['0000001'].price + ';' +
data['1399001'].name + ': ' +
data['1399001'].price;
}
<script>
var js = document.createElement('script');
var head = document.getElementsByTagName('head')[0];
js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
head.appendChild(js);
</script>
这个方法只适用于get方式,并要求返回javascript。
4、CORS
CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。
跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin
,决定权始终在对方手中。
具体讲解还是看廖雪峰老师的网站吧https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000