3种跨域解决方案

作者: 墨峰小哥 | 来源:发表于2018-05-11 10:54 被阅读0次

Web前后端跨域问题处理
跨域问题，解决方案
前端如何解决常见跨域问题
开发环境跨域和生产环境跨域
浏览器跨域及其解决方案
跨域解决方案
跨域
Angular访问WebApi出现options方法
跨域解决方案（史上最易懂）
ZUUL跨域问题

1. JSONP

JSONP是一种数据调用方式，是解决跨域交互的方法。网页通过在script标签里添加元素，向服务器请求数据，这种做法不受同源政策的限制。服务器收到请求后，把数据放在一个指定的回调函数中返回。

//1. 定义处理函数appendHtml
function appendHtml(news){
  var html=""
  for(var i=0;i<news.length;i++){
    html+="<li>"+news[i]+"</li>"
  }
  console.log(html)
  $(".news")innerHtml=html

}

//2.创建script标签，src地址执行后端端口，地址的末尾加个参数callback=appendHtml
$(".change").addEventListener("click",function(){
  var script=document.createElement("script")
  script.src='http://localhost:8080/getNews?callback=appendHtml'
  document.head.appendChild("script")
  document.head.removeChild("script")
})

//3.服务器在收到请求后，解析参数，计算返还数据，输出appendHtml(data)字符串
var cb=req.query.callback
if(cb){
  res.send(cb+"("+JSON.stringify(data)+")")
}else{
  res.send(data)
}

//4. appendHtml(data)会放到script标签里当做js执行，同时调用appendHtml()函数。将data作为参数。

2. CORS

cross origin resource sharing 跨域资源共享。这是W3C的标准，是跨域请求的根本解决方法。相比JSONP只能发get请求，CORS允许发任何类型的请求。

对于开发者来说CORS 通信与同源的ajax通信没有差别，代码完全一样。浏览器一旦发现ajax请求是跨源的，会自动在头部添加origin标签，用户无需单独做操作。
工作流程：

当使用XMLHttpRequest发送请求时，浏览器会检测到不符合同源策略，于是会加一个请求头origin。
后台确认符合策略时，会在返回的数据里添加一个响应头access-control-allow-origin。
浏览器判断该响应头中是否有origin值，如果有则接收数据。如果没有，则直接驳回。我们无法拿到数据。

 $('.change').addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                appendHtml(JSON.parse(xhr.responseText))
            }
        };
        window.xhr = xhr
    });

//如果有则浏览器会处理响应，我们就可以拿到响应数据，
    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
    //res.header("Access-Control-Allow-Origin", "*");

可实现CORS跨域：响应头被允许

3. 降域

如果在域名a.jrg.com通过js操作b.jrg.com将会报错：浏览器阻止访问不同源的iframe
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>

通过修改document.domain来跨域操纵页面上的iframe，这样就能达到我们的目标，让他们实现跨域交互

document.domain = "jrg.com"

4.Post Message

降域实现跨域通信时要求两个域属于同一个父级域名。而post message没有这个限制。

一个页面向另一个页面发送postmessage消息，如果接收方愿意接收的话(通过message语句监听)，那么就实现了通信。

主页面a.html向ifame页面b.html加入postMessage信息

    $('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].postMessage(this.value, '*');
    });
        $('.main input').value = e.data;
        console.log(e.data);
    });

iframe页面b.html向父页面a.htm加入postmessage信息

    $('#input').addEventListener('input', function(){
        window.parent.postMessage(this.value, '*');
    });
    window.addEventListener('message',function(e) {
        $('#input').value = e.data;
        console.log(e.data);
    });