作为一个前端求职者一定不会陌生跨域这个词，动不动面试中就会被问到。但是很疑惑的是，作为一个前端，我真的不知道什么是跨域啊，工作中又没遇到跨域的问题啊。
很奇怪啊，为什么我工作中从来没用到的东西老是问我。不要感到奇怪，为什么我没遇到跨域的问题？因为你进项目的时候有人已经把这个问题解决了啊。
那前端还会问了，既然有人解决了，我怎么没在代码中找到怎么解决的啊？答案是，因为是在后端配置的啊（CORS-跨域资源共享）。
为什么会有跨域的问题
既然你诚心诚意问了，那我就正儿八经的回答你。跨域是为了安全啊！
感觉这个回答没什么意义吧，因为回答起来很复杂啊。就不具体介绍了，有兴趣的可以了解一下浏览器的同源策略 和 为什么给你设置重重障碍？讲一讲Web开发中的跨域——二、为什么不让我跨域
简单看下这个表，相对于 http://store.company.com/dir/page.html 同源检测的示例：
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html |
成功 | |
http://store.company.com/dir/inner/another.html |
成功 | |
https://store.company.com/secure.html |
失败 | 不同协议 ( https和http ) |
http://store.company.com:81/dir/etc.html |
失败 | 不同端口 ( 81和80) |
http://news.company.com/dir/other.html |
失败 | 不同域名 ( news和store ) |
简单来说就是协议、端口、域名有任何一个不同都会导致同源检测失败。
解决方案
方案一：JSONP
为什么叫 JSONP 呢？JSONP 的全称是 JSON with Padding，填充式 JSON 或 参数式JSON。JSONP 由两部分构成：回调函数和数据。
首先回调函数长这样子：
function handleResponse(response) {
console.log(response)
}
例如点击按钮时，发一个请求获取 books 数据：
function handleClick() {
let script = document.createElement("script");
script.src = "http://books?callback=handleResponse";
script.async = true;
script.type = "text/javascript";
document.body.appendChild(script);
}
当点击按钮时，调用 handleClick 函数。此函数做的事儿就是动态的添加一个 <script/> 标签，url 就是获取 books 的接口。url 中有一个 callback 的参数，其值就是 handleResponse 函数。请求回来后就会调用 handleResponse函数，这样子我们就拿到了数据。
JSONP 优点是使用简单，兼容性也不错，但是只限于 get 请求。
方案二：CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS 需要浏览器和后端都支持，现在浏览器都支持（IE10以上），那么就需要后端配置一下了。
只要后端设置 Access-Control-Allow-Origin 就可以实现跨域了。需要了解详情的可以参考跨域资源共享 CORS 详解
方案三：document.domain
此方案只适用于二级域名相同的情况下，比如 pageA.crossdomin.com 和 pageB.crossdomin.com。只需要在页面设置 document.domin = 'crossdomin.com'，表示二级域名相同就可以了。
参考
当然，还有一下方案可以实现跨域，就不一一详细说明了。
- postMessage
- 其他跨域技术 —— JavaScript 高级程序设计（第三版）P586
参考文章：
网友评论