2019-04-10

跨域原理和跨域方法

今天校招收简历时，一位面试官问我跨域的原理和方法，我只说了前端用jsonp后端用cors，原理没说上来，方法也没说全，所以特别找了资料补充自己的知识库。

跨域

是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。

跨域解决方案

1.JSONP

2.window.name + iframe

3.hash + iframe

4.postMessage

5.CORS

6.WebSocketsCORS

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();
    })

转载：https://www.cnblogs.com/ahole/p/5885122.html