跨域
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url，不一样。此时，同源机制会让浏览器拒收 服务器响应回来的数据。
同源机制
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
三种解决方式
JSONP
JSONP(JSON with padding(添加))是通过 script 标签加载数据的方式，去获取数据，并把数据 当做 JS 代码来执行：提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
jsonp缺点：只能实现get一种请求。JSONP太骇客，不如下面的CORS正统。
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.domain2.com:8080/login?callback=handleCallback';
document.head.appendChild(script);
// 回调执行函数
function handleCallback(res) {
alert(JSON.stringify(res));
}
</script>
// 服务端返回如下（返回时即执行全局函数）
handleCallback({"status": true, "user": "admin"})
这个请求到达后端后，后端会去解析callback这个参数，获取到字符串handleCallback，在发送数据时调用handleCallback这个函数，把数据作为参数传过来。 用户只需要在加载 提前在页面定义好handleCallback这个全局函数，在函数内部处理参数即可。
CORS
CORS 全称是 跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，
1 当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin；（浏览器无需做设置 只需发送ajax）
2 后台服务器收到请求后，会进行一系列处理，如果确定接受请求，则在返回结果中加入一个响应头：Access-Control-Allow-Origin （换言之，服务器允许的域url，会加入此响应头，相当于一个凭证）;
3 浏览器判断该相应头中是否包含 Origin 的值，如果有，则浏览器会处理响应，我们就可以拿到响应数据，如果不包含，浏览器直接驳回，这时我们无法拿到响应数据。
所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。
postMessage
通过让iframe的js元素，执行postmessage()，以发送消息给iframe访问的url网站，如果网站服务器收到消息（即 监听到了 以该消息为名 的事件）并进行处理，则浏览器可以实现一定程度的跨域。
浏览器发送数据 window.frames[0].postMessage(this.value,'*');
服务器监听跨域请求&浏览器监听返回的数据 window.addEventListener('message',function(e) {})
参考https://blog.csdn.net/tang_yi_/article/details/79401280
网友评论