Johnny的专栏

Github : github.com/johnnynode | Website : johnnynode.com | Email : johnnynode@gmail.com

JSONP跨域问题演示

跨域是什么?

首先说下同源,同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。而跨域就是不同源 !

能够进行跨域的请求

一般a,img,link[rel=stylesheet],video,audio,等等能够发出请求的标签都可以实现跨域访问。但是这些标签不能得到返回的东西,所以一般不会用他们来请求资源。

常见的跨域处理方案

由于ajax先天设计的时候,不能实现跨域访问。所以就出现了处理跨域这样的问题。
① jsonp来处理跨域,下面用jquery来实现,关键代码如下:

$.ajax({
  type : "GET",
  url : "http://www.a.com/index.php?message=msg&callback=?",
  dataType : "jsonp",
  jsonp: 'callback',
  success : function(json){
      console.log(json.msg);
  }
});

② 服务端设置 Access-Control-Allow-Origin
我们使用nodejs来完成这一问题。服务端代码如下:

"use strict"
const http = require('http');
const server = http.createServer();

server.on('request',(req,res)=>{
    res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"*"});
    res.write('ajax cross domain');
    res.end();
})

server.listen(3000,(err)=>{
  if(err){
    return console.log(err.message);
  }
  console.log('server is on');
})

浏览器端代码如下:

window.onload = function(){
  var xhr = new XMLHttpRequest();
  xhr.open("post","http://localhost:3000/");
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status==200){
          console.log(xhr.responseText);
        }
    }
  }
  xhr.send(null);
}

使用http的形式访问客户端网页,那么就会输出不同源下返回的数据。
③ 其他跨域策略 iframe, window.postMessage(), window.name(较好的解决方案,值得推荐)等
详见: http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

④ 使用豆瓣的api,简单封装一个跨域请求函数:

<script>
    /* 封装数据  跨域url  params fn */
    function crossDomain(url,params,fn){
        var head = document.getElementsByTagName('head')[0];
        // 1. 处理回调函数
        var cbName = 'jsonp'+ (Math.random() * Math.random()).toString().substr(2) + new Date().getTime();
        /* 将回调函数挂载到window对象上 */
        window[cbName] = function(data){
            // 拿到并处理数据
            fn(data);
            // 拿到数据后remove掉
            //head.removeChild(scriptObj);
        }
        // 2. 解析url
        var qstring = '';
        for(var key in params){
            qstring += key + '=' + params['key'] + '&';
        }
        qstring += 'callback=' + cbName;
        url += '?' + qstring;
        // 3. 插入script
        var scriptObj = document.createElement('script');
        scriptObj.src = url;
        head.appendChild(scriptObj);
    }
</script>

<script>
    /*  使用  */
    crossDomain('http://api.douban.com/v2/movie/in_theaters',{},function(data){
        console.log(data);
    })
</script>

⑤ 使用grunt 或 gulp等构建工具进行请求转发,此处省略

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Tyro_java/article/details/51548383
个人分类: javascript
上一篇angular中的路由简单使用
下一篇使用css3做0.5px的细线
想对作者说点什么? 我来说一句

js跨域jsonp的使用

2015年08月04日 4.53MB 下载

JSONP三种方式解决跨域问题

2017年04月19日 262KB 下载

没有更多推荐了,返回首页

关闭
关闭