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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
js日期时间补零的小例子
Mar 05 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
纯javascript制作日历控件
Jul 17 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
谈一谈收音机的高放电路
2021/03/02 无线电
PHP4中session登录页面的应用
2008/07/25 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
vue组件系列之TagsInput详解
2020/05/14 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python文件操作的简单方法总结
2019/11/07 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书