【面试题】前端解决跨域的几种方案

「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」

了解浏览器的同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。常见的跨域场景举例如下：

怎样解决跨域问题？

1. 通过jsonp跨域

通常为了减轻web服务器负载，我们把js、css、img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同的域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

vue.js实现

this.$http.jsonp('http://test2.com:8080/login', {
    params:{},
    jsonp:'onBack'
}).then((res)=> {
    console.log(res)
})
// 回调函数
function onBack(res) {
alert(JSON.stringify(res))
}

jquery ajax实现

$.ajax({
    url:'http://www.domain2.com:8080/login',
    type:'get',
    dataType:'jsonp',//请求方式为
    jsonpCallback:'onBack',//自定义回调函数
    data:{}
})

原生实现

<script>
var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}
</script>

2. document.domain + iframe 跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document。domain为基础域，就实现了同域。

父窗口：(www.abc.com/a.html)

<iframe id="iframe" src="http://child.abc.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>

子窗口：(child.abc.com/b.html)

<script>
document.domain = 'abc.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);
</script>

其他跨域方案

• location.hash + iframe

• window.name + iframe跨域

• postMessage跨域

• 跨域资源共享（cors）

• nginx代理跨域

• nodejs中间件代理跨域

• webSocket协议跨域