如何快速解决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卸载全部事件的思路详解
Apr 03 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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设计模式之命令模式的深入解析
2013/06/13 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python ljust rjust center输出
2008/09/06 Python
python删除列表中重复记录的方法
2015/04/28 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
单位成立周年感言
2014/01/26 职场文书
小学英语教学反思案例
2014/02/04 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
青年教师个人总结
2015/02/11 职场文书
离婚答辩状范文
2015/05/22 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python