最直白的跨域

最直白的跨域_第1张图片
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();
    })

心情

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

你可能感兴趣的:(最直白的跨域)