5种处理js跨域问题方法汇总


Posted in Javascript onDecember 04, 2014

前两天碰到一个跨域问题的处理,使用jsonp可以解决。(https://3water.com/article/57889.htm)

最近再整理了一下:

1.jsonp。

   ajax请求,dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式。如果服务端返回的是普通json对象。那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误;在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误。

2.iframe跨域。

   页面中增加一个iframe元素,在需要调用get请求的时候,将iframe的src设置为get请求的url即可发起get请求的调用。

var url = "http://xxx.xxx.xxx?p1=1&p2=2";

$("#iframe").attr("src", url);//跨域,使用iframe

iframe方式强于jsonp,除了可以处理http请求,还能够跨域实现js调用。

3.script元素的src属性处理

   iframe、img、style、script等元素的src属性可以直接向不同域请求资源,jsonp正是利用script标签跨域请求资源的简单实现,所以这个和jsonp本质一样,同样需要服务端请求返回callback...形式。

var url="http://xxx.xxx.xxx?p1=1";

var script = document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0].appendChild(script);

4.在服务器使用get处理。

   对于业务上没有硬性要求在前端处理的,可以在服务端做一次封装,再服务端发起调用,这样就可以解决跨域的问题。然后再根据请求是发出就完,还是需要获取返回值,来决定代码使用同步或者异步模式。

        private static void CreateGetHttpResponse(string url, int? timeout, string userAgent, CookieCollection cookies)

        {

            if (string.IsNullOrEmpty(url))

            {

                throw new ArgumentNullException("url");

            }

            var request = WebRequest.Create(url) as HttpWebRequest;

            request.Method = "GET";

            if (!string.IsNullOrEmpty(userAgent))

            {

                request.UserAgent = userAgent;

            }

            if (timeout.HasValue)

            {

                request.Timeout = timeout.Value;

            }

            if (cookies != null)

            {

                request.CookieContainer = new CookieContainer();

                request.CookieContainer.Add(cookies);

            }

            request.BeginGetResponse(null,null);//异步

            //return request.GetResponse() as HttpWebResponse;

        }

5.flash跨域

过于尖端了==,再研究

总结:以上5种方法就是常见的解决js跨域问题的处理方法了,最后一种比较高端,等我研究清楚了再补上吧。

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue实现评价星星功能
Jun 30 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 #Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 #Javascript
javascript中clone对象详解
Dec 03 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
php 更新数据库中断的解决方法
2009/06/05 PHP
解析php入库和出库
2013/06/25 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python如何求圆的面积
2020/07/01 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
高三自我鉴定怎么写
2013/10/19 职场文书
班级旅游计划书
2014/05/03 职场文书
工地安全生产标语
2014/06/06 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2016年国培研修日志
2015/11/13 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Django migrate报错的解决方案
2021/05/20 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL