如何快速解决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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现进度条状态展示
Mar 26 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
php 无极分类(递归)实现代码
2010/01/05 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
解析PHP提交后跳转
2013/06/23 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python zip函数打包元素实例解析
2019/12/11 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
升职自荐信
2013/11/28 职场文书
2014年教师节活动总结
2014/08/29 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
光荣之路观后感
2015/06/12 职场文书
单位接收证明格式
2015/06/18 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript