如何快速解决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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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
Home Coffee Roasting
2021/03/03 咖啡文化
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python学生管理系统
2019/01/30 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
教育专业个人求职信
2013/12/02 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
高中生期末评语
2014/01/28 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
园艺师求职信
2014/03/10 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
社区活动总结
2015/02/04 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫