如何快速解决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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现飞机大战小游戏
Jul 05 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 Undefined index的问题
2009/06/01 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript 常用方法总结
2009/06/03 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python的装饰器使用详解
2017/06/26 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
幼儿园六一儿童节开幕词
2016/03/04 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python