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

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

跨域net::ERR_CONNECTION_REFUSED解决方法

var a=1;     function ping(){         var inp = document.getElementById("ipdz").value;           ...
  • merrylilili
  • merrylilili
  • 2017年02月22日 14:07
  • 6295

net::ERR_CONNECTION_REFUSED解决办法

最近想把自己的项目通过ngrok挂到网上,但是发现一个问题,本来在自己的电脑上运行一切正常的程序,把链接发给别人之后,就报”net::ERR_CONNECTION_REFUSED”错误,百思不得解,本...
  • zhenyushao
  • zhenyushao
  • 2017年02月10日 17:06
  • 94388

JavaScript处理ajax时net::ERR_CONNECTION_REFUSED

net::ERR_CONNECTION_REFUSED
  • frankcheng5143
  • frankcheng5143
  • 2017年05月23日 16:26
  • 14574

错误102 (net::ERR_CONNECTION_REFUSED): 未知的错误

今天在虚拟机里面用了一个代理软件来达到翻墙的目的,想去看看facebook的神奇。关了了该代理软件后,IE就上不了网了。报的错是 错误102 (net::ERR_CONNECTION_REFUSED)...
  • CYXLZZS
  • CYXLZZS
  • 2011年07月13日 10:47
  • 33328

关于跨域策略文件crossdomain.xml文件

下载flexpaper源码修改后做成swf阅读器,要加入待阅读的swf文件,可以在flex里调用js的方法来获取swf文件的路径的方法,在js只专注获取路径就行,等着flex来调用:但这里会遇到一个问...
  • summerhust
  • summerhust
  • 2012年07月06日 11:38
  • 67716

Cordova Ajax请求跨域问题整理

一、默认情况下Cordova在页面中不能直接使用Ajax请求访问外域的数据 异常1: ripple.js:51 Refused to connect to 'http://localhost:59...
  • u011127019
  • u011127019
  • 2017年02月17日 10:35
  • 4596

JSONP跨域问题演示

跨域是什么?首先说下同源,同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。而跨域就是不同源 !能够进行跨域的请求一般a,img,link[rel=stylesheet],vid...
  • Tyro_java
  • Tyro_java
  • 2016年05月31日 19:53
  • 1037

用最简单的例子演示如何使用js或者$.ajax进行跨域请求

本文用一个最简单的例子演示如何使用javascript或者$.ajax进行跨域请求
  • lhtzbj12
  • lhtzbj12
  • 2016年12月29日 15:19
  • 1613

JS跨域问题以及采用JSONP方式解决跨域问题

在做项目的时候,客户要做成客户端和服务端两部分,客户端向服务端进行认证,我开始的时候没有直接替换ip地址,后来采用ip地址替换之后,出现了问题,后台可以收到访问的请求,但是无法拿到后台返回的信息,后来...
  • wangyang1354
  • wangyang1354
  • 2016年05月18日 20:08
  • 1821

解决Ajax 跨域问题 - JSONP原理解析

解决Ajax 跨域问题 - JSONP原理解析为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一...
  • qq_16415157
  • qq_16415157
  • 2016年11月11日 23:24
  • 6315
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSONP跨域问题演示
举报原因:
原因补充:

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