前端常见跨域问题解决办法

最近终于要迈出新的一步了，去面试了一个公司，问到了一个问题是如何解决跨域问题？

因为之前看了一点，还是这自己的地盘记下来，省的每次都要去别人那里看。

这部分内容主要来自廖雪峰老师的网站中关于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