跨域以及实现跨域的方法

一 什么是跨域

1 什么是同源策略以及限制内容？

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

同源策略限制内容有：
Cookie LocalStorage IndexedDB 等存储型内容
DOM 节点
AJAX 请求不能发送

但是有三个标签是允许跨域加载资源：
<img srx=XXX>
<link href=XXX>
<script src=XXX>

2 常见跨域场景

第一 如果是协议和端口造成的跨域问题，‘前台’是无能为力的
第二 在跨域问题上，仅仅是通过‘url的首部’来识别而不会根据域名对应的IP地址是否相同来判断。‘url’的首部可以理解为‘协议 域名和端口必须匹配’
请求跨域了，那么请求到底发出去没有？
跨域并不是请求发不出去，请求能发出去，服务器能收到请求并正常返回结果，只是结果被浏览器拦截了。通过表单的方式可以发起跨域请求，AJAX就不会？跨域是为了阻止用户读取到另一个域名下的内容，ajax可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明跨域并不能完全阻止CSRF,因为请求毕竟是发出去了。

二 跨域解决方案

1 JSONP

1.1 JSONP原理
利用<script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。
1.2 JSONP和ajax对比
jsonp和ajax相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式，但是ajax属于同源策略。jsonp数据非同源策略（跨域请求）
1.3 jsonp的优缺点
jsonp优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问问题。缺点是仅支持get方法具有局限性，不安全可能会遭受XSS攻击
1.4 jsonp的实现流程
1.4.1 声明一个回调函数，其函数名（如show）当做参数值，要传递给跨域请求数据的服务器，函数形参要获取目标数据（服务器返回的data）
1.4.2 创建一个<script>标签，把那个跨域的API数据接口地址，赋值给script的src，还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）
服务器接收请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串，例如：传递进去的函数名是show，
它准备好的数据是show('hello word')
1.4.3 最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。
在开发中可能会遇到多个JSONP请求的回调函数名是相同的，这时候就需要自己封装一个JSONP函数；

function jsonp(url,params,callback){
　　return new Promise((resolve,reject)=>{
　　　　let script=document.createElement('script');
　　　　let arrs=[];
　　　　params={...params,callback};
　　　　for(let key in params)
　　　　arrs.push(`${key}=${params[key]}`);
　　　　script.src=`${url}?${arrs.join('&')}`
　　　　document.body.appendChild(script);
　　　　window[callback]=function(data){
　　　　resolve(data)
　　　　document.body.removeChild(script)
　　　}
　　})
}
jsonp({url:'http://localhost:3000/say',params:{wd:'xxxxxx'},callback:'show'}).then(data=>{
　　console.log(data);
})

上面这段代码相当于向http://localhost:3000/say?wd=xxxxxx&callback=show这个地址请求数据，然后回台返回show('hello world'),最后会运行show()这个函数
jQuery的jsonp形式

JSONP都是get和异步请求，不存在其他的请求方式和同步请求,且jQuery默认就会给JSONP的请求清除缓存。

$.ajax({
　　url:'http://localhost:3000/say',
　　dataType:'jsonp',
　　type:'get',//可以省略
　　jsonpCallback:'show',//自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略
　　jsonp:'callback',//把传递函数名的那个形参callback,可省略
　　success:function(data){
　　　　console.log(data);
　　}
})

2 CORS

CORS需要浏览器和后端同时支持。IE8和9需要通过XDomainRequest来实现。
浏览器会自动进行CORS通信，实现CORS通信的关键是后端。只要后端实现了CORS，就实现可跨域。
服务端设置Access-Control-Allow-Origin就可以开启CORS,该属性表示那些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
虽然设置CORS和前端没什么关系，但是通过这种方式解决跨域的问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。
1 简单请求
只要请求体同时满足一下两大条件，就属于简单请求
条件1： 使用下列方法之一：GET HEAD POST
条件2：post请求的content-Type的值仅限于下列三者之一： text/plain，multipart/form-data，application/x-www-form-urlencoded
请求中的任意XMLHttpQequestUpload对象均没有注册任何事件监听器；XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问
2 复杂请求
不符合以上条件的请求就肯定时复杂请求了。
复杂请求的CPRS请i去，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求，该请求时option方法的，通过该请求来知道服务端是否允许跨域请求。

我们用PUT向后台请求时，属于复杂请求，后台需做如下配置：
res.setHeader('Access-Control-Allow-Methods','PUT');

3 postMessage

postMessage是HTML5 XMLHttpRequest Level2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决一下方面的问题：
3.1 页面和其他打开的新窗口的数据传递
3.2 多窗口之间的信息传递
3.3 页面与嵌套的iframe信息传递
3.4 上面三个场景的跨域数据传递

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档 多窗口 跨域信息传递。
otherWindow.postMessage(message,targetOrigin,[transtfer])
message:将要发送到其他window的数据
targetOrigin:通过窗口的origin属性来指令那些窗口能接收到信息事件，其值可以是字符串"*"(表示无限制)或者一个URI。
在发送消息的时候，如果目标窗口的协议 主机地址或者端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。
transfer（可选）：是一串和messgae同时传递的Transferable对象,这些对象的所有权将被转移给信息的接收方，而发送方将不再保有所有权。

4 websocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是开宇的一种解决方案。
WebSocket和HTTP都是应用层协议，都基于TCP协议。但是WebSocket是一种双向通信协议，在建议连接之后，WebSocket的server与client都能主动向
对方发送或接收数据。同时，websocket在建立连接时需要借助HTTP协议，连接建立好之后client与server之间的双向通信就与HTTP无关了。

5 Node中间件代理（两次跨域）

实现原理：同源策略时浏览器需要遵循的标准，而如果时服务器向服务器请求就无需遵循同源策略。
代理服务器，需要做一下几个步骤：
接受客户端请求
将请求转发给服务器
拿到服务器相应数据
将响应转发给客户端

6 nginx反向代理

实现原理类似与Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。
使用nginx反向代理实现跨域，时最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

7 window.name + iframe

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的name值。
window.name属性有一个特性：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name,每个页面对window.name都有读写
的权限，window.name是持久存在一个窗口载入过的所有页面中的
通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙绕过了浏览器的跨域
访问限制，但同时它又安全操作。

8 location.hash + iframe

实现原理：a.html欲与c.html跨域互相通信，通过中间页b.html来实现。三个页面，不同域之间利用iframe的location.hash传值，
相同域之间直接js访问来通信。
具体实现步骤：一开始a.html给c.html传一个hash值，然后c.html收到hash值后，再把hash值传递给b.html,最后b.html将结果放在a.html
的hash值中。
同样的，a.html和b.html是同域的，而c.html不是同域的

9 document.domain + iframe

该方式只能用于二级域名相同的情况下，比如 a.test.com和b.test.com适用于该方式。
只需要给页面添加document.domain='test.com'表示二级域名都相同就可以实现跨域。
在a.html和b.html中都设置document.domain='test.com';这样就实现跨域了
将子域和主域的document.domain设为同一个主域，前提条件：这两个域名必须属于同一个基础域名，而且所有的协议 端口都要一致，否则无法利用
document.domain进行跨域

三 总结

CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
日常工作中，用得比较多的跨域方案是cors和nginx反向代理

来源：https://www.cnblogs.com/fundebug/p/10329202.html