跨域的解决方式

JSONP

JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域要资料。
由于同源策略，一般来说位于server1.example.com的网页无法与不是 server1.example.com的伺服器沟通，而HTML的

router.js

app.get('/getNews',function(req,res){
    var news = [
        "习近平:坚持中国特色社会主义社会治理之路",
        "在组织生活会上普通党员习近平说了啥  喜迎十九大",
        "重访习近平十八大以来国内考察地  《辉煌中国》",
        "李克强同李显龙会谈  张德江主持会议  刘云山访越",
        "大国网信安全护航  2017年国家网络安全宣传周",
        "侠客岛：李显龙时隔近4年为何“突然”访华?",
        "墨西哥地震致一学校教学楼倒塌 约百名学生失踪",
        "深圳一小学65名学生现身体不适 官方:已停用操场",
        "媒体：想知道中国海军有多强？仅需一个细节",
        "特朗普演讲：朝鲜半岛无核化是唯一可接受的未来",
        "外媒：中国高铁网络预示着“高流动性时代”的到来",
        "外国专家：北斗已超越欧盟、俄罗斯卫星导航系统"
    ]
    // 内容库

    var data = []
    for(var i = 0;i<3;i++){
        var index = parseInt(Math.random()*news.length)
        // parseInt取整，抽取内容库的随机数字
        data.push(news[index])
        // 把这条随机的新闻，传给data数组
        news.splice(index,1)
        //移除这条新闻，避免重复
    }

    var cb = req.query.callback;
    // 获取传递的callback值
    if(cb){
        res.send(cb+'('+JSON.stringify(data)+')');
    //JSON.stringify 将JavaScript的值转化为JSON
    //如果有callback的值，返回callback值+(["xxx","xxx","xxx"])
    }else{
        res.send(data);        
    //如果没有，返回["xxx","xxx","xxx"]
    }
})

CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

例：http://a.jrg.com:8080网站向http://b.jrg.com:8080/getNews获取数据

html

    

        

            
习近平:坚持中国特色社会主义社会治理之路
            
在组织生活会上普通党员习近平说了啥  喜迎十九大
            
重访习近平十八大以来国内考察地  《辉煌中国》
        
        换一组
    

script

    $('#btn').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) )
        }
    }
    })

    function appendHtml(news){
        var html = '';
        for(var i = 0;i'        
        }
        $('.news').innerHTML = html;
    }
    
    function $(id){
        return document.querySelector(id);
    }

router.js

app.get('/getNews',function(req,res){
    var news = [
        "习近平:坚持中国特色社会主义社会治理之路",
        "在组织生活会上普通党员习近平说了啥  喜迎十九大",
        "重访习近平十八大以来国内考察地  《辉煌中国》",
        "李克强同李显龙会谈  张德江主持会议  刘云山访越",
        "大国网信安全护航  2017年国家网络安全宣传周",
        "侠客岛：李显龙时隔近4年为何“突然”访华?",
        "墨西哥地震致一学校教学楼倒塌 约百名学生失踪",
        "深圳一小学65名学生现身体不适 官方:已停用操场",
        "媒体：想知道中国海军有多强？仅需一个细节",
        "特朗普演讲：朝鲜半岛无核化是唯一可接受的未来",
        "外媒：中国高铁网络预示着“高流动性时代”的到来",
        "外国专家：北斗已超越欧盟、俄罗斯卫星导航系统"
    ]

    var data = []
    for(var i = 0;i<3;i++){
        var index = parseInt(Math.random()*news.length)
        data.push(news[index])
        news.splice(index,1)
    }

    res.header("Access-Control-Allow-Origin","http://a.jrg.com:8080")
    // 返回来自http://a.jrg.com:8080的数据请求

    //res.header("Access-Control-Allow-Origin","*")
    //返回所有网站的数据请求

    res.send(data);
})

降域

a.html

  

    
降域
    

    
  
  
  
  

b.html

postMessage

postMessage对于不同的域下，可以向他发送一个数据，如果对方接受认可这个数据，那就可以去使用，如果对象没有去监控这个数据，就没有任何作用。

a.html

  

    
postMessage
    

    
  
  
  

b.html

其他跨域方式

js中几种实用的跨域方法原理详解

用到的函数

• JSON.stringify()方法将一个 JavaScript 值转换为一个 JSON 字符串，如果指定了一个 replacer 函数，则可以替换值，或者如果指定了一个 replacer 数组，可选地仅包括指定的属性。
• parseInt() 函数可解析一个字符串，并返回一个整数。
• JSON.parse()方法用于将一个 JSON 字符串转换为对象。

参考文章

JSON.stringify()
parseInt() 函数
JSON.parse()