文档章节

JavaScript 跨域的实现方法

lcy_ltpsr
 lcy_ltpsr
发布于 2016/05/01 15:14
字数 632
阅读 23
收藏 0

1、参考资料:
(1) jquery + jsonp:
 1) JSONP只能使用GET方式,不能使用POST方式。
 2) JSONP可以修改http headers ,将用户自定义的字段加入到请求头。 [$.ajax]

 http://www.cnblogs.com/2050/p/3191744.html
 https://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

 It is not possible to make a JSONP POST request.
 JSONP works by creating a <script> tag that executes Javascript from a different domain; 
 it is not possible to send a POST request using a <script> tag.  
 <script> inclusion can only trigger a GET.

(2) Cross-Origin Resource Sharing (CORS):
 1) CORS 方法可以使用GET或POST方式、可以修改headers ,将用户自定义的字段加入到请求头中。
 2) 实现过程需要修改服务器资源文件的配置。
 
 http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery 
 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
 https://cnodejs.org/topic/519c234863e9f8a542aa7ebd

备注: 推荐采用 JSONP、CORS、HTML5的postMessage, 具体方案需要根据具体问题(情况)讨论来确定.  
 
2、具体方案的实现过程: 
(1) JSONP 的方案: 简述实现过程 
 -> 浏览器: test.js   // 请求的方式只能是 GET
  $.getJSON("URL&callback=?",function(jsonData) {
   var data = JSON.parse(jsonData);
  });
  或者采用 $.ajax 的方式:
  $.ajax({
   headers: {
       'Content-Type':'application/json',        

   },
   type:'GET',
   url: URL,
   data: {name:'string'},
   dataType: 'jsonp',
   jsonp: 'callback',      //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
   jsonpCallback:'feedBackState', //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
   success:function(result){
    console.log(result);
   }
  });
 
 -> 服务器 Server: 最后的输出必须采用如下方式:
  $.getJSON 方式: 服务器使用 PHP
   echo $_GET['callback'] . '(' . $jsonData . ');';
  $.ajax 方式:服务器使用 PHP
   $jsonp = $_REQUEST["callback"];
   $str = '[{"id":"1","name":"test1"},{"id":"2","name":"test2"}]';
   $str = $jsonp . "(" . $str . ")";
   echo $str;
   
(2) Cross-Origin Resource Sharing (CORS) 实现过程:
 -> 浏览器请求: test.js 
  $.ajax({
   headers: {
    'Content-Type':'application/json'
   },
   url: URL, 
   type: 'POST',         // 请求的方式
   crossDomain: true,    // 请求服务器允许跨域,目前大部分浏览器都支持
   processData: false,   // 发送原生的数据
   data: jsonDatas,         
   dataType: 'json',     // 指定传递数据的类型 json     
   success:function(result){
    alert(JSON.stringify(result));
    // 如果返回的数据格式是json的字符串类型的, 需要使用函数 JSON.parse 对其解析转化成json数据对象 
    // 如果返回的数据格式本身就是 json, 那么就可以直接使用该JSON数据,不需要解析转化
   },
   error:function(xhr,status,error){
    alert(status);
   }
  });
  
 -> 服务器 Server: put this lines in your server side file:
  if PHP:
  header('Access-Control-Allow-Origin: *');      // 允许跨域请求 
  header('Access-Control-Allow-Methods: POST');  // 允许使用 POST 请求
  header('Access-Control-Max-Age: 1000');        // 这句话可以不加 

© 著作权归作者所有

lcy_ltpsr
粉丝 1
博文 11
码字总数 7850
作品 0
浦东
程序员
私信 提问
iframe 与主框架相互访问方法

1.同域相互访问 假设A.html 与 b.html domain都是localhost (同域) A.html中iframe 嵌入 B.html,name=myframe A.html有js function fMain() B.html有js function fIframe() 需要实现 A.ht......

lsjane
2015/08/20
317
0
AJAX 跨域请求 - JSONP获取JSON数据

原文地址:http://justcoding.iteye.com/blog/1366102 AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web Asynchronous JavaScript and XML (Ajax ) 是驱......

water014300
2014/12/22
208
0
第113天:Ajax跨域请求解决方法

一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送n...

半指温柔乐
2017/12/13
0
0
Iframe高度自适应(兼容IE/Firefox、同域/跨域)

看转贴吧 但是需要说明的是,就是大家不要以为可以用这种方法来控制别人的网页,不行的 这个跨域虽说域名不一样,但必须都是你的,也就是你可以修改的才行,这个跨域这种方法可以实现,但是如...

thinkgood
2013/10/14
337
0
JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN
2015/06/04
870
0

没有更多内容

加载失败,请刷新页面

加载更多

VMware vSphere ESXi主机的访问控制

在vShpere中,访问ESXi主机的途径很多,如下: ESXi DCUI ESXi Shell ESXi SSH ESXi Host Client vCenter --> vSphere web client / vSphere Client VMware vSphere ESXi主机的访问控制,除了......

大别阿郎
26分钟前
3
0
大神讲解CGI、FastCGI和PHP-FPM关系图解

参考资料 概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM:http://www.nowamagic.net/librarys/veda/detail/1319 php中fastcgi和php-fpm是什么东西:https://www.zybuluo.com/phper/note/50231 ......

网络小虾米
35分钟前
3
0
《DNS攻击防范科普系列3》 -如何保障 DNS 操作安全

引言 前两讲我们介绍了 DNS 相关的攻击类型,以及针对 DDoS 攻击的防范措施。这些都是更底层的知识,有同学就来问能否讲讲和我们的日常操作相关的知识点,今天我们就来说说和我们日常 DNS 操...

Mr_zebra
36分钟前
3
0
zk中ServerCnxn

实现接口Stats, Watcher 内部类 DisconnectReason CloseRequestException EndOfStreamException(流关闭) 属性 方法 getSessionTimeout 获取session失效时间 sendResponse 发送回复数据 se......

writeademo
40分钟前
3
0
如何将 Redis 用于微服务通信的事件存储

来源:Redislabs 作者:Martin Forstner 翻译:Kevin (公众号:中间件小哥) 以我的经验,将某些应用拆分成更小的、松耦合的、可协同工作的独立逻辑业务服务会更易于构建和维护。这些服务(也...

中间件小哥
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部