JSONP跨域问题演示

原创 2016年05月31日 19:53:06

跨域是什么?

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

能够进行跨域的请求

一般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等构建工具进行请求转发,此处省略

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

改变一生的经济学规律

人与人的不同取决与脖子以上的部位,更取决于自己的选择。 人生不同阶段的不同选择,决定了你将来的经济地位和社会地位。 边际效应递减规律 效应:满足程度, utility 边际效应 (Margina...

JavaScript中的模块化之AMD和CMD

前言: 为什么我们需要模块化开发,模块化开发的好处有哪些? 首先我们先说一下非模块化的开发方式带来的弊端。 非模块化开发中会导致一些问题的出现,变量和函数命名可能相同,会造成变量污染和冲突,并...

JSONP解决跨域问题

  • 2014年10月16日 11:24
  • 87KB
  • 下载

JSONP三种方式解决跨域问题

  • 2017年04月19日 15:53
  • 262KB
  • 下载

前端与服务器分离开发出现跨域问题,jsonp与gulp-connect注意点,angularjs改造

预备 在网络中,受到浏览器内部机制的限制,本域内,也就是自身服务器下的服务的js是不能操作其他域下的页面对象,或者去请求域下的数据,这个时候就会产生跨域问题。 有些人会奇怪,为什么cdn或者图片加...

jsonp跨域的安全问题

JSONP没有关于错误调用的处理,一旦回调函数失败,浏览器就会以静默失败的方式处理。 只支持GET请求 安全性问题 1、Callback可自定义导致的安全问题Content-type与XSS漏洞 再...

ajax完美解决跨域问题(jsonp、nginx反向代理)

ajax完美解决跨域问题(jsonp、nginx反向代理) 做过web前端人都知道,经常会有ajax跨域问题,下面列举我经常使用的解决办法 第一种:使用jsonp,jQuery的a...

深入浅出JSONP:解决AJAX跨域问题

取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序...

原生jsonp解决跨域问题例子_获取第三方天气数据

原生jsonp解决跨域问题例子_获取第三方天气数据 #div1 { width...
  • stopcpp
  • stopcpp
  • 2016年11月25日 14:46
  • 1150

深入浅出JSONP--解决ajax跨域问题

转载链接 取不到数据!  上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSONP跨域问题演示
举报原因:
原因补充:

(最多只允许输入30个字)