熟悉web前端开发的人都知道，浏览器在请求不同域的资源时，会受到浏览器的同源策略影响，常常请求资源不成功，这也就是我们常常提到的跨域问题。这类问题常常会拖延着项目的推进，困扰着前端开发者。今天，我们就来谈一谈前端中可能会遇到的跨域问题。
1.跨域问题的由来
首先我们需要了解的是，前端处于项目开发过程中最接近用户的一个区域，代码最容易被hack获取解析，也最容易受到攻击。针对这个问题，互联网早期探索者Netscape提出了一个著名的安全策略——同源策略：浏览器限制脚本中发起的跨站请求，要求JavaScript或cookie只能访问同源的资源。这里的同源指的是，域名，协议名，以及端口号相同。正是由于这个机制，才致使我们无法用简单的手段来请求不同域名下的资源。
2.如何解决跨域问题
2.1跨域资源共享CORS
CORS是W3C提出的一个标准——CORS跨域资源共享（Cross-Origin Resource Sharing）。它允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服AJAX只能同源使用的限制。
首先CORS需要浏览器和服务器同时支持，现代浏览器包括IE10+都支持CORS请求。
使用CORS跨域的时候和普通的AJAX过程是一样的。浏览器一但发现AJAX请求跨域资源，就会自动添加一些请求头帮助我们处理一些事情。所以说只要服务端提供CORS支持，前端不需要做额外的事情。
CORS请求分两种，这里简单介绍其中一种：
i)简单请求（simple request）
满足以下两大条件，就属于简单请求。
请求方式是head,get,post三者中其一
http请求头信息不超出以下字段：Accept、Accept-Language、Last-Event-ID、Content-Type:只限于application/x-www-form-urlencoded、multipart/form-data和text/plain
浏览器在进行简单请求时，伴随着ajax请求的产生，浏览器会自动添加origin字段，表明请求来源。服务器会识别出源，并且决定是否返回数据给该源。
如果origin并不在服务器许可范围内，服务器会返回一个正常的http。浏览器接受后发现这个http的头信息中不包含Access-Control-Allow-Origin字段，就知道出错了，随后在浏览器会抛出相应的error。
这里列出几个返回http中常见的几个CORS请求头：
Access-Control-Allow-Origin:该字段为必需字段，可以是指定的源名（协议+域名+端口），也可以使用通配符*代表接受所有跨域资源请求
Access-Control-Allow-Credentials:该字段为boolean值，表示是否允许发送cookie,默认为false,即不允许发送cookie值。
Access-Control-Expose-Headers:该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma.如果想拿到其他的字段，必须在Access-Control-Expose-Headers里面指定。
ii)非简单请求
非简单请求会对服务器有特殊的要求，在正式通信之前，会增加一次http查询请求，会额外的占用资源，并进而影响到请求速度。达观数据在数据处理以及返回数据的过程中对性能有着极高的要求，在实际项目中并没有尝试这种实现方式。笔者本人也并未对此做过深入学习，在此就不班门弄斧了。
2.2使用jsonp进行跨域请求
Jsonp可以说是目前跨域问题的最普遍的解决方案了。在此简要介绍一下jsonp的概念。首先，jsonp跟json只有一字母之差，但完全是两个概念，json是一种数据存储的基本格式，通常见于js脚本存储数据，ajax请求数据。而jsonp是一种非正式的传输协议，该协议的一个要点是允许用户传递一个callback参数给服务端，服务端返回数据时，会将callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
Jsonp的原理是：普通资源请求都会受到跨域影响，但含有src属性的跨域资源在调用时并不会受到影响。Jsonp就是由于这种特性被发掘并实现跨域的。
在使用jsonp进行跨域请求时，首先我们需要注册一个callback回调函数，这个函数需要接受一个参数。然后我们需要动态生成一个script标签，并在请求的src中加入我们的callback名称。
2.3小众跨域方式
除了CORS和jsonp之外还有一些比较小众的跨域方式，在此就将这些放在一起整理出来。
i)document.domain
首先我们需要知道的是，页面中的iframe和其父页面的window对象是可以互相获取到的（尽管取到的window对象不能拿到方法和属性）。但是我们可以通过修改document.domain这一属性，来使获得window对象具有方法和属性。这里需要注意的是，iframe和其父页面的主域名必须相同。例如，在www.datagrand.com/index.html页面中嵌入一个src为shilieyu.datagrand.com/index.html的iframe，同时修改两个页面的document.domain为datagrand.com。这样就可以在互相获取到对方页面的window对象中，就会存在方法和属性了。这时，在其中一个页面中可以使用ajax请求数据，另一个页面就可以使用window对象获取到对应数据。
ii)window.postMessage
postMessage为html5中引进的方法，该方法可以向其他window对象发送消息，无论这个window对象是否同源。
原网站：https://mp.weixin.qq.com/s/OSv2HqUMchoLMhtfyar30w
网友评论