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生成GUID的多种算法小结
Aug 18 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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时间戳与日期的转换
2013/06/06 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php使用google地图应用实例
2014/12/31 PHP
php实现文件预览功能
2017/05/23 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
Web开发之JavaScript
2012/03/29 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
JS实现随机点名器
2020/04/12 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
python打开windows应用程序的实例
2019/06/28 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python进行参数传递的方法
2020/05/12 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
python中spy++的使用超详细教程
2021/01/29 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
五年级数学教学反思
2014/02/11 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Python进程池与进程锁之语法学习
2022/04/11 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
搭建Yolov5服务器
2022/04/30 Servers