随手记一记之【跨域】

作为一个前端求职者一定不会陌生跨域这个词，动不动面试中就会被问到。但是很疑惑的是，作为一个前端，我真的不知道什么是跨域啊，工作中又没遇到跨域的问题啊。

很奇怪啊，为什么我工作中从来没用到的东西老是问我。不要感到奇怪，为什么我没遇到跨域的问题？因为你进项目的时候有人已经把这个问题解决了啊。

那前端还会问了，既然有人解决了，我怎么没在代码中找到怎么解决的啊？答案是，因为是在后端配置的啊（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 函数。此函数做的事儿就是动态的添加一个