如何快速解决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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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
小文件php+SQLite存储方案
2010/09/04 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
javascript的push使用指南
2014/12/05 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
基于python socketserver框架全面解析
2017/09/21 Python
Python中的默认参数实例分析
2018/01/29 Python
python实现AES加密解密
2019/03/28 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Django中URL的参数传递的实现
2019/08/04 Python
pyspark 随机森林的实现
2020/04/24 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
计算机考试作弊检讨书1000字
2015/01/01 职场文书
保护环境的宣传语
2015/07/13 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书