跨域是日常开发中经常开发中经常会接触到的一个重难点知识，何不总结实践一番，从此心中对之了无牵挂。
同源策略之所以会出现跨域解决方案，是因为同源策略的限制。同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。比如下列表格列出和 :3000 比较的同源检测的结果，
url 结果 原因:3000/index 同源
https://127.0.0.1:3000 跨源 协议不同
https://localhost:3000 跨源 域名不同
:3001 跨源 端口不同
那跨源有什么后果呢？归纳有三：不能获取 Cookie、LocalStorage、IndexedDB；不能获取 dom 节点；不能进行一般的 Ajax 通信；跨域解决方案的出现就是为了解决以上痛处。
JSONP 跨域提到 JSONP 跨域，不得不先提到 script 标签，和 img、iframe 标签类似，这些标签是不受同源策略限制的，JSONP 的核心就是通过动态加载 script 标签来完成对目标 url 的请求。
先来看一段 JSONP 调用的 Headers 部分，字段如下：
Request URL::3000/?callback=handleResponse Request Method:GET Status Code:200 OK Remote Address:127.0.0.1:3000可以很鲜明地发现在 Request URL 中有一句 ?callback=handleResponse，这个 callback 后面跟着的 handleResponse 即回调函数名（可以任意取），服务端会接收到这个参数然后拼接成形如 handleResponse(JSON) 的形式返还给前端(这也是 JSONP == JSON with padding 的原因吧)，如下图，这时候浏览器就会自动调用我们事先定义好的 handleResponse 函数。
前端代码示例：(源为 :3001)
function handleResponse(res) { console.log(res) // {text: "jsonp"} } const script =http://www.likecs.com/ document.createElement('script') script.src =http://www.likecs.com/ 'http://127.0.0.1:3000?callback=handleResponse' document.head.appendChild(script)