跨域处理实践

  关于跨域的解决办法网上很多方法,之前自己也认真考究过,测试过jsonp的实现原理,看过jquery源码中封装的$.ajax()部分内容,在此只是记录自己在项目中处理过跨域的问题。想看更加详细的可以看看《浏览器同源政策及其规避方法》

问题1
  本地开发环境想通过$ajax()获取测试环境的数据,因为本地和开发域名不一样,受到同源策略限制,不能获取测试环境数据。

解决:
在php的控制器中加上header("Access-Control-Allow-Origin");可以拿到测试环境数据。OK。

问题2:

请求不同资源下的资源。

解决:

使用jsonp,在$.ajax(),添加dataType字段。

php代码

//兼容触屏跨域请求
        $jsonpCallback = Yii::app()->request->getParam(‘callback‘);

        if($jsonpCallback){

            if(!$result){
                echo $jsonpCallback.‘({errno: 101, msg: "101 ‘. ErrorApi::$errMsg .‘"})‘;
                exit();
            }

            if( !isset($result[‘prizeId‘]) ){
                echo $jsonpCallback.‘({errno: 100, data: ‘. json_encode($result) .‘})‘;
            }else{
                echo $jsonpCallback.‘({errno: 0, data: ‘. json_encode($result) .‘})‘;
            }
            exit();
        }

  

jsonp注意:

1、callback和jsonpCallback是jquery源码中默认使用的,也可以自己修改。
2、jsonp只有GET请求,这是由于 script 标签自身的限制决定的。jQuery源码中,POST请求也会转换为GET请求。

3、不能很好的发现错误,并进行处理。与 Ajax 对比,由于不是通过 XmlHttpRequest 进行传输,所以不能注册 success、 error 等事件监听函数。

时间: 2024-07-30 03:54:34

跨域处理实践的相关文章

常用跨域方法实践(一)

这几天看了鬼道师兄的<跨终端Web>这本书,该书从解决实际业务出发,讲述了跨终端的优势与未来,受益良多.其中,书中第九章介绍了作者在阿里内部的一个参赛作品Storage,该作品巧妙的使用了跨域知识,让我见识到跨域其实不仅仅是JSONP.以前,对前端跨域这块或多或少有点了解,但真正动手实践的不是很多.于是,这段时间我好好整理了常用跨域方法的具体实现.本文,主要介绍了JSONP和CORS的实现方式. 相关概念: 只要协议.域名.端口有任何一个不同,都被当作是不同的域 JavaScript出于安全方

常用跨域方法实践(二)

本文承接 上一篇博文,上一篇博文介绍了跨域的相关概念.测试demo的相关配置和 JSONP 和 CORS 两种跨域方式的实现.本文主要介绍 document.domain . URL.hash . cross-fragment . window.name 和 postMessage 这五种方式的跨域实现. document.domain 如果 A 源和 B 源具有相同的父域名,通过设置 document.domain 属性,就很容易使其相互通信.在 HTML 规范中document.domain

基于JWT的web api身份验证及跨域调用实践

随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的做法有所不同,除了面临跨域提交cookie的烦人问题外,更重要的是,有些终端可能根本不支持cookie. Json Web Token(jwt)是一种不错的身份验证及授权方案,简单的说就是调用端调用api时,附带上一个由api端颁发的token,以此来验证调用者的授权信息.但由于时间关系,不对jwt

跨域问题实践总结!下(JSONP/document.domain/window.name)

4. [HTML5] postMessage 问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊.此文仅使用html5的新特性postMessage,演示其执行过程和效果: 方法解释:postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递.postMessage(data,origin)方法接受两个参数:1.data:你需要传递的消息,消息传递的格式有一定要求:参数可

跨域问题实践总结! 上(JSONP/document.domain/window.name)

1. JSONP 首先要介绍的跨域方法必然是 JSONP. 现在你想要获取其他网站上的 JavaScript 脚本,你非常高兴的使用 XMLHttpRequest 对象来获取.但是浏览器一点儿也不配合你,无情的弹出了下面的错误信息: XMLHttpRequest cannot load http://x.com/main.dat. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origi

前端如何去做跨域解决方案

前言 那些你,你常用的跨域解决方案除了jsonp 之外,还有其他的吗?今日早读文章可以告诉你,本文由 金蝶 @scq000授权分享. 正文从这开始~ 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的"跨域问题".作为前端开发,解决跨域问题应该是一个被熟练掌握的技能.而随着技术不断的更迭,针对跨域问题的解决也衍生出了多种解决方案.我们通常会根据项目的不同需要,而采取不同的方式.这篇文章,将详细总结跨域问题的相关知识点,以便在遇到相同问题的时候,能有一个清晰的

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

AJAX跨域与JSONP的一点实践经验

前几个周,项目中遇到了AJAX跨域的问题,然后找资料解决了. 首先要说明一点,关于AJAX的跨域原理和实践,我的经验还是比较少的,我只是大致看了下网上的资料,结合自己的理解,找到了解决办法,暂时不去仔细研究,因为要做的事情太多了,不可能把所有的问题都给研究透彻了. 问题场景: a.com访问二级域名cms.a.com上的AJAX请求,遇到了跨域问题,Chrome-Firefox都没有问题,IE7-8-9都没有数据,直接报错了.貌似AJAX跨域不同浏览器的机制不一样. 网上有提到一种叫"JSONP

关于跨域的N种方法实践之iframe+domain

一.原理 1.主域相同,子域不同,可以设置document.domain来解决跨域. 2.在http://www.example.com/a.html和http://sub.example.com/b.html两个文件中都加上document.domain = "example.com": 3.通过a.html文件创建一个iframe,去控制iframe的window,从而进行交互. 二.测试方法 1.通过gulp启用两个本地服务器,并在hosts文件映射域名(主域名相同,子域名不同)