跨域，对于正在学习或者已经就业的前端同学而言，就是老朋友。只要涉及“请求”“前后端交互”“开发阶段”等关键字，都避不开跨域。同时它也是面试中最常出现的考点之一，面试官可以通过跨域，了解应聘者对网络协议、网络安全等概念的理解。

跨域并不是阻碍前后端交互的障碍，什么是跨域，怎么避开跨域带来的不便，本文主要细解三种主流的解决方案：JSONP，CORS，代理服务器，细致地解开跨域相关的迷惑。

一、同源策略

同源策略是一个重要的安全策略，它用于限制一个Origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

Origin：指web文档的来源，Web内容的来源取决于访问的URL的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。

二、跨域

关于URL是否同源，根据上图中的①②③进行判断即可，只要有一点不同，就达到跨域的条件。顺带一提，即便是向域名对应的ip进行资源请求，仍然会跨域。

IE的特殊性：InternetExplorer的同源策略有两点差异，一是IE未将端口号纳入同源策略的检查，其次是两个高度互信的域名也不受同源策略的检查。

常见的跨域情景：

浏览器内常见的跨域报错：

跨域出现的场景：

一般常见于开发阶段，本地启动项目后，当前页面域名和后台服务器域名不相同，导致跨域。在项目上线后，会通过统一域名、后端配置域名白名单等方式避免跨域。

下方的解决方案中，我们通过koa2框架搭建服务器，实现一系列的情景模拟。

三、跨域的解决方案

1.JSONP

原理：通过script标签没有跨域限制的特性，进行资源的请求和获取。

限制：需要目标服务器进行配合，且仅支持get请求

我们直接通过代码和注释，理解jsonp的使用前端代码如下：

script

window.jsonp=function(res){

console.log(res);

}

/script

scriptsrc="
转载请注明原文网址：http://www.helimiaopu.com/hjpz/hjpz/12822.html