前端开发 | 那些年曾谈起的跨域

对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解决呢？本文会对这些问题一一的介绍。

在JavaScript中，在不同的域名下面进行数据交互，就会遇到跨域问题，说到跨域首先要从同源说起，浏览器为了提供一种安全的运行环境，各个浏览器厂商协定使用同源策略。

什么同源策略

同源策略：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指协议+域名+端口三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

Url组成部分

了解同源策略以后，同样需要对url的组成部分也顺带了解一下吧，只有了解url之后当出现跨域的时候才知道哪里出了问题，这样才能和后端、运维开怼，怼天怼地对空气。O(∩_∩)O哈哈~

从上图中能够清晰的看出url中每个部分的含义：

1. protocol：协议常用的协议是http
2. auth：验证，因为明文传输用户名和密码，非HTTPS环境下很不安全，一般用的非常少。
3. hostname：主机地址，可以是域名，也可以是IP地址
4. port：端口http协议默认端口是：80端口，如果不写默认就是:80端口
5. pathname：路径网络资源在服务器中的指定路径
6. serarch：查询字符串如果需要从服务器那里查询内容，在这里编辑
7. hash：哈希网页中可能会分为不同的片段，如果想访问网页后直接到达指定位置，可以在这部分设置

项目过程过程中经常会用到一些缓存，浏览器为了网页的安全在缓存的时候，由于同源策略的问题对其缓存内容进行了限制，其实想想也是对的，如果不使用同源策略的话，很容易冲掉缓存的东西。

1. Cookie、LocalStorage和IndexDB等无法读取。
2. DOM无法获得。
3. AJAX请求不能发送。

当然浏览器也没有把所有的东西都限制了，比如图片、互联网资源等还是允许跨域请求的。允许跨域请求都是使用标签，只有三个标签是允许跨域加载资源：

1. <img src=XXX>
2. <link href=XXX>
3. <script src=XXX>

在项目开发过程中时不时的就会遇到下面这样抛出了错误，有的人可能在开发过程中没有遇到过，如果是的话，你可能遇到一个很不错的后端或者运维。

XMLHttpRequest cannot loadhttp://www.******.com/. No 'Access-Control-Allow-Origin'   
header is present on the requested resource. Origin 'null' is therefore not allowed access.  

上面的报错就是典型的跨域报错，既然跨域这么常见到底都有哪些情况会导致跨域的问题：

跨域解决方案

由于浏览器的限制造成了很多的跨域问题，同样也是为了安全，既然出现了跨域就必定要有一些对应的解决方案，总不能遇到跨域之后项目就不做了啊，可能瞬间就凉了。闲话就不多扯了。

JSONP

在遇到跨域的时候经常会提及到的一个词就是JSONP，一直在说JSONP？可是通过什么原理来实现的呢？我觉得应该了解一下到底什么再去了解一下实现固然原理也就懂得咯。

什么是JSONP

JSONP:JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于server1.example.com的网页无法与不是server1.example.com的服务器沟通，而HTML的<script>元素是一个例外。利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON，而是任意的JavaScript，用JavaScript直译器执行而不是用JSON解析器解析。 - 选自百度百科

对于JSONP简单的百度了一下，百度给出的解释如上，看完整段话，有一些小的收获，第一script标签具有开放策略，可以使用src的开放性解决其跨域问题。在这里简单的阐述一下个人观点。JSONP可以分为两个部分来解读，JSON与padding，JSON固然就不用解释了，只是一种数据格式，padding在css中是内填充的意思，其实JSONP的原理与内填充有些类似。通过把数据填充js文件中然后引入到页面中，并在页面中使用。

有没有注意过百度，其实百度的即时搜索就是使用JSONP来实现的，可以尝试一下，在百度中搜索一下，就会在Network中看到一个以sugrec为开头的请求，这个请求就是使用的JSONP的形式，为了大家方便特意截选了一个段连接。

连接：  
https://www.baidu.com/sugrec?prod=pc&wd=json&pwd=json&cb=query  
返回格式：  
query({  
    "q": "json",  
    "p": false,  
    "g": [{  
        "type": "sug",  
        "sa": "s_1",  
        "q": "json格式"  
    }, {  
        "type": "sug",  
        "sa": "s_2",  
        "q": "jsonp"  
    }, {  
        "type": "sug",  
        "sa": "s_3",  
        "q": "json解析"  
    },  
    ...]  
}) 

（编辑：ASP站长网）