如何快速解决JS或Jquery ajax异步跨域的问题


Posted in jQuery onJanuary 08, 2018

简单的概括下,解决办法有两种。

一种是jsonp方式:即在前端发送异步请求时,添加相关的jsonp设置或配置;后端则返回可供jsonp解析的格式的串。                                             

但是jsonp方式只支持get的请求方式,并且不被新浏览器版本的支持(新浏览器版本多进行OPITION请求--异步安全检查的测试的请求,所以jsonp方式无法通过),

这里就不多了解了。

一种是cros方式,优点就是更安全,能指定连接白名单,能限定请求方法(也就是支持多种请求方法),主流浏览器都支持。主要说一下实现方式,

前端:和普通异步请求一样的格式,如:

$.ajax({ 
   url :'http://localhost:8080/myProject/test' 
    type : "GET",//不局限于get 
   data:{"key1":value1,"key2":value2}, 
   async : true, 
   success : function(data) { 
    var dataObj=eval("("+data+")"); 
     console.log(dataObj); 
     
   }, 
   error : function(data) { 
    alert( "服务器连接失败 ajaxJsonp" ); 
   } 
  });

后端:主要是设置响应头参数

response.setHeader("Access-Control-Allow-Origin", "*");//设置可跨域资源共享的域名,只能设置一个具体的域名,但*可以代表所有 
response.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,OPTIONS");//设置可跨域资源共享的请求方式 
  response.setHeader("Access-Control-Allow-Credentials","true"); 
  response.setHeader("Access-Control-Allow-Headers" ,"Origin, X-Requested-With, Content-Type, Accept");
jQuery 相关文章推荐
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
jQuery中库的引用方法
Jan 06 #jQuery
jQuery封装animate.css的实例
Jan 04 #jQuery
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
跟随鼠标旋转的文字
2006/11/30 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
20招让你的Python飞起来!
2016/09/27 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python小白切忌乱用表达式
2020/05/29 Python
如何验证python安装成功
2020/07/06 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
高中社区服务活动报告
2015/02/05 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android