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 相关文章推荐
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
Javascript高级技巧分享
Feb 25 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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
浅谈PHP语法(1)
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
详解Python3中的Sequence type的使用
2015/08/01 Python
深入浅析Python字符编码
2015/11/12 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python向图片里添加文字
2019/11/26 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
小学生班会演讲稿
2014/01/09 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
大学生十八大感想
2015/08/11 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
python脚本框架webpy模板赋值实现
2021/11/20 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS