跨域的定义与解决

跨域问题

因为浏览器的同源策略，非同源网址之间不可内容交互。非同源的一个域的JavaScript脚本不可对另一个域的内容进行交互。

判断跨域

当请求url与当前url的子域名、主域名、端口其中之一不一致时，会产生跨域限制

非同源限制

● 无法读取cookie、localstorage、indexedDB
● 无法接触非同源的DOM
● 无法发送AJAX请求

解决办法

设置document.domain解决cookie读取问题
浏览器通过document.domain属性来判断两个页面是否同源，可以通过设置相同的document.domain来共享cookie
document.domain = ‘mayuri.com’;
该方法只可使用于主域名相同、子域名不同的情况。

跨文档API：window.postMessage()
通过调用该API来实现从父窗口传递信息给子窗口
可以适用的应用场景：
● 父子窗口的数据传递
● 多窗口之间信息传递
● 页面与嵌套iframe信息传递
● 上面三个场景的跨域数据传递
传递案例代码

var open = window.open('http://mayuri2.com','title');//打开子窗口
open.postMessage('hello mayuri !','http://mayuri2.com');//参数一为传递的信息，参数二要送达的页面
监听案例代码
window.addEventListener('message',function(e){
	console.log(e.source);//发送方
  console.log(e.origin);//接收方
  console.log(e.data);//发送的数据
},false);

JSONP
服务器与客户端跨域通信的方法，只支持get，不支持post
添加一个“script”元素，向服务器请求JSON数据，服务器收到请求后，将数据放在指定名字的回调函数的参数位置传回来
原生

<script src = "http://mayuri.com/callback=confirmGet"></script>
//url中有一个callback参数，指定回调函数的函数名
<script type = "text/javascript">
  	function confirmGet(res){
			console.log(res.data);
}
</script>

jQuery ajax

$.ajax({
	url:'http://mayuri.com/',
  type:'get',
  dataType:'jsonp',//请求方式为jsonp
  jsonCallback:'confirmGet',//回调函数
  data:{}
});

Vue.js

this.$http.jsonp('http://mayuri.com/',
                 {
	params:{},
  jsonp:'confirmGet' //回调函数
}).then((res) =>{
	console.log(res);
})

CORS
跨域资源分享，是跨域AJAX请求的根本解决方法
● 普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
● 带cookie跨域请求：前后端都要设置
前端：根据xhr.withCredentials字段判断是否带有cookie
后端：根据Access-Control-Allow-Origin来检测是否设置支持CORS
webpack本地代理
客户端转发请求到另一个域名，然后服务器根据相对路径来向本地服务器发送请求，服务器端发送请求给客户端也是同理
websocket
Websocket是H5的一个持久化协议，是服务器和客户端的全双工通信。
websocket和http都是应用层TCP协议，是一种双向通信协议。
websocket通过http建立连接，实现客户端和服务器两边主动发送请求。
Nginx反向代理
类似Node中间件代理，通过配置多个前缀来转发请求到服务器，这样这些url都是同源的，可以实现跨域请求。这台服务器上的js可以跨域到该服务器配置的所有url