最直白的跨域

sad.jpg

跨域的背景

1.为了安全我们的浏览器有同源策略。使我们不方便跨域访问。
2.出于种种原因我们就是要跨域访问。
3.前辈们通过钻空子想出来的方法，和后来新的API等都让我们能够跨域访问。

关键字：同源策略、跨域访问。

跨域访问的方法

1.JSONP
2.window.name + iframe
3.hash + iframe
4.postMessage
5.CORS
6.WebSockets

PS：我写一些常用的方法，没有讲的要么是新技术要么是。。。我懒得写。求你打我。

CORS

PS: 我使用node作为后台语言，开启两个服务器localhost:3000和localhost：1234 来模拟跨域访问

这个是最简单无脑的，不过跟前端没什么关系，这是后台的写。后台在返回的头部中写 Access-Control-Allow-Origin:xxxx（xxxx 为被允许访问的源）这样就搞定啦。

    router.get('/cors', function (req, res) {
        res.set('Access-Control-Allow-Origin','http://localhost:1234');
        res.send('Mid-Autumn is a lonely day');
    });

    // 跨域访问： localhost:1234 页面下访问localhost:3000/cors 
    $.ajax({
            url: "http://localhost:3000/cors",
            success: function (data) {
                alert(data);
            }
        });

缺点：不能携带cookie信息，不能使用自定义请求头部，需要兼容IE浏览器。最重要的是不能装逼，后特么给后台去干了，前端没逼可装。

JSONP

也是个简单的方法，这个是前辈们钻空子想出来的方法。
大概原理是这样的：
1.在全局定义一个funName函数 2.在页面中创建一个script，src格式为：url+?cb=funName&key1=value1。
3.后台定义一个接口来接受cb,key 等参数，逻辑计算，返回格式为字符串：funName({prop:value});

$(function () {
    var btn = $('button');
    btn.on('click', function () {
        JSONP({
            url: 'http://localhost:3000/jsonp',
            data: {
                name: 'ahole',
                goddness: 'GillianChung'
            },
            jsonp:'ahole',
            success: function (data) {
                alert(data.name + '\'s Goddness is ' + data.goddness);
            }
        })
    })
    function JSONP(data) {

        var script = $('');
        res.end();
    })

心情

读了几年大学，发现原来那些以前的"坏"同学飞黄腾达的不是个例，而是事实。而像我这种考大学的智力又低的只能领低保。