跨域总结

跨域总结

最近遇到线上接口，本地访问的跨域问题，总结如下：

几种方法

• jsonp、动态创建script : 需要后台配合。 后台回传的数据，需要用callback函数包装。否则不能使用此方法实现跨域。
• H5的postMessage方法：需要后台配合。
• cors方法：后台设置配置 允许接入的域，就可以了
  Access-Control-Allow-Origin：*
• yahoo线上jsonp代理：不需要后台配合
  详细见：http://www.w3dev.cn/article/20130228/JSONP-crossdomain-online-httpproxy-api.aspx
• 服务端做代理: 例如使用ngnix。 如果是非jsonp接口用这个吧。
• iFrame 需要嵌入的页面做配合

yahoo线上jsonp代理*

作者：破 狼 出处：http://www.cnblogs.com/whitewolf/
yahoo提供的jsonp代理：http://query.yahooapis.com/v1/public/yql

你可以讲示例放在你网站下运行，绝对不会报错

html：
接口数据为json格式：
－[如果运行无效果，请自行将源代码保存为html文件运行]

<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        dataType: 'jsonp',
        data: {
            q: "select * from json where url=\"http://www.w3dev.cn/json.asp\"",
            format: "json"
        },
        success: function (d) {
           alert(JSON.stringify(d))//远程json数据放在query.results下
        }
    });</script>

如果跨域数据源不是json格式的，而是html代码，可以用下面的代码获取到跨域页面的html代码，结果如下
－[如果运行无效果，请自行将源代码保存为html文件运行]

<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        dataType: 'jsonp',
        data: {
            q: "select * from html where url=\"http://www.w3dev.cn/eg/base64.aspx\"",
            format: "xml"
        },
        success: function (d) {
           alert(JSON.stringify(d))//跨域html代码放在results下，注意和json的区别
        }
    });</script>

---