跨域问题方案总结

什么是同源策略？

1. 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
2. 所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
   3.同源策略限制以下几种行为：
   1.) Cookie、LocalStorage 和 IndexDB 无法读取
   2.) DOM 和 Js对象无法获得
   3.) AJAX 请求不能发送

常见解决方案

1. jsonp

    前端实现jquery （还可以原生 vue。js）：
        $.ajax({
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "onBack",    // 自定义回调函数名
        data: {}
    });
   

   后端：

    var querystring = require('querystring');
    var http = require('http');
    var server = http.createServer();
   
    server.on('request', function(req, res) {
        var params = qs.parse(req.url.split('?')[1]);
        var fn = params.callback;
   
        // jsonp返回设置
        res.writeHead(200, { 'Content-Type': 'text/javascript' });
        res.write(fn + '(' + JSON.stringify(params) + ')');
   
        res.end();
    });
   
    server.listen('8080');
    console.log('Server is running at port 8080...')
   

PS：
1. 前端发起请求时候，会加一个参数表示回调的函数 比如 callback=callback124 (callback 参数名也是可以自定义的，和后端协商好就行)
后端返回的数据 callback124({“uid”:1})
2. 参考： https://segmentfault.com/a/1190000011145364
2. CORS
前端实现：

         $.ajax({
            type: "post",
            url: 'http://192.168.45.152:8081/conference/user/bind',
            async: false, // 使用同步方式
            // 1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14...
            // 2 需要强制类型转换，否则格式为 {"a":"2","b":"3"}
            data: JSON.stringify({                  
                a: 1,
                b: '2',
                now: new Date().getTime() // 注意不要在此行增加逗号
            }),
			headers: {
              'Authentication':'xxxxxx'
             },
            contentType: "text/plain",
            dataType: "json",
            success: function(data) {
              console.log(data)
            } // 注意不要在此行增加逗号
        });

后端实现：

    # 一个 cors 的装饰器
    corsConfigMap = {
        "default": {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': '*',
            'Access-Control-Allow-Credentials': 'true',
            'Access-Control-Allow-Headers': 'authentication,content-type'
        }
    }

    # 构造cors 结果
    def corsResponse(strVal, corsHeaders):
        resp = Response(strVal, headers=corsHeaders)
        mimetype = "application/json; charset=UTF-8"
        resp.set_header('Content-Type', mimetype)
        return resp

PS：

1. 参考：http://www.ruanyifeng.com/blog/2016/04/cors.html

2. crossdomain.xml 解决flash 跨域访问的问题 （参考：http://blog.51cto.com/mayday/1214844）