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之Ajax运用 学习运用篇
Sep 26 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
vue设置默认首页的操作
Aug 12 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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
多重?l件?合查?(二)
2006/10/09 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python 数据结构之队列的实现
2017/01/22 Python
Pycharm更换python解释器的方法
2018/10/29 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers