经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
Ajax跨域问题及解决方案
来源：cnblogs　　作者：炭烧生蚝　　时间：2019/5/5 8:57:38　　对本文有异议

目录

复现Ajax跨域问题

  • 做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java
  • 首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口.
  1. @RequestMapping("/loadOrderList")
  2. @ResponseBody
  3. public List<Order> loadOrderList(String uid){
  4.     //模拟订单数据
  5.     Order o1 = new Order();
  6.     o1.setId("111");
  7.     o1.setTotal(333.33);
  8.     o1.setDate("2019-4-29");
  10.     Order o2 = new Order();
  11.     o2.setId("222");
  12.     o2.setTotal(444.44);
  13.     o2.setDate("2019-5-29");
  15.     Order o3 = new Order();
  16.     o3.setId("333");
  17.     o3.setTotal(555.55);
  18.     o3.setDate("2019-6-29");
  20.     List<Order> list = new ArrayList<>();
  21.     list.add(o1);
  22.     list.add(o2);
  23.     list.add(o3);
  25.     return list;
  26. }
  • 在另一个项目中做一个向订单系统发送一个ajax请求, 获取订单集合. 该项目使用Tomcat插件发布在9090端口.
  1. //index.jsp
  3. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <html>
  5. <head>
  6.     <title>Title</title>
  7.     <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  8.     <script type="text/javascript">
  9.         function sendAjax() {
  10.             $.post("http://localhost:7070/order/loadOrderList", "uid=1234", function (data) {
  11.                 alert(data);
  12.             });
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.     <a href="javascript:sendAjax()">sendAjax</a>
  18. </body>
  19. </html>

?

  • 点击sendAjax超链接向订单系统发送ajax请求.
    在这里插入图片描述
  • 通过开发者工具发现虽然服务器以状态码200响应回来, 但是控制台却报错了.
    在这里插入图片描述
    在这里插入图片描述
  • 这就是Ajax跨域出错的一种表现, 下面分析原因.

?

Ajax跨域介绍

  • Ajax跨域问题是由浏览器的同源策略造成的, 首先要理解源这个概念.
  • 我们可以通过协议+域名+端口确定一个源. 在上面的示例中, 你可以把一个项目理解为一个源. Ajax请求可以对源内的资源发起访问, 但是不同源之间进行Ajax就会有问题.
  • 当向不同源的资源发起Ajax请求时, 浏览器会加上Origin字段来标识源
  1. Accept: */*
  2. Accept-Encoding: gzip, deflate, br
  3. Accept-Language: zh-CN,zh;q=0.9
  4. Connection: keep-alive
  5. Content-Length: 8
  6. Content-Type: application/x-www-form-urlencoded; charset=UTF-8
  7. Host: localhost:7070
  8. Origin: http://localhost:9090   协议+域名+端口
  • 服务器会根据Origin字段决定是否同意这次请求, 如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应. 浏览器解析时发现缺少了这个字段, 就会报错. 这种错误不能通过状态码识别, 因为状态码很有可能就是200(见上面的案例).

?

Ajax跨域解决方案

  • 下面介绍最常用Ajax跨域解决方案.

一. 在服务端添加响应头Access-Control-Allow-Origin

  • 既然我们已经知道了Ajax跨域失败是因为响应中缺少了响应头Access-Control-Allow-Origin, 那么就想办法加上去.
  • 以Java项目为例, 在后端我们使用CORSFilter过滤器加上该响应头.
  • (假设是Maven项目), 首先在pom.xml中添加坐标
  1. <dependency>
  2.     <groupId>com.thetransactioncompany</groupId>
  3.     <artifactId>cors-filter</artifactId>
  4.     <version>2.5</version>
  5.     <scope>runtime</scope>
  6. </dependency>
  • 然后在web.xml中对过滤器进行配置.
  1.     <filter>
  2.         <filter-name>CORS</filter-name>
  3.         <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
  4.         <init-param>
  5.             <param-name>cors.allowOrigin</param-name><!--这个标签是关键, *代表所有源都能访问-->
  6.             <param-value>*</param-value>
  7.         </init-param>
  8.         <init-param>
  9.             <param-name>cors.supportedMethods</param-name>
  10.             <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
  11.         </init-param>
  12.         <init-param>
  13.             <param-name>cors.supportedHeaders</param-name>
  14.             <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
  15.         </init-param>
  16.         <init-param>
  17.             <param-name>cors.exposedHeaders</param-name>
  18.             <param-value>Set-Cookie</param-value>
  19.         </init-param>
  20.         <init-param>
  21.             <param-name>cors.supportsCredentials</param-name>
  22.             <param-value>true</param-value>
  23.         </init-param>
  24.     </filter>
  26.     <filter-mapping>
  27.         <filter-name>CORS</filter-name>
  28.         <url-pattern>/*</url-pattern>
  29.     </filter-mapping>

?

  • 配置后重启订单项目, 再次发起Ajax请求可以看到成功返回数据, 响应头中包含了Access-Control-Allow-Origin, 值为发起Ajax请求的源.
    在这里插入图片描述
    在这里插入图片描述
    ?

二. 使用JSONP解决

  • 上面直接通过过滤器添加响应头的方法可以说是对症下药, 那么还有没有什么偏方呢?
  • 还真的有. 在jsp文件中经常通过通过<script>标签引入一段js代码, 这段代码通常来源于网络, 也就是不同源. 那么我们不妨通过<srcipt>标签完成Ajax请求, 这样便顺带解决了跨域问题.
  • 下面还是沿用上面的案例进行演示.
  • 我们对发送ajax的jsp进行修改
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  6.     <script>
  7.         function doCallBack(data){
  8.             var str = JSON.stringify(data);
  9.             alert(str);
  10.         }
  11.     </script>
  12. </head>
  13. <body>
  14.     <script src="http://localhost:7070/order/loadOrderList3?uid=111&callBack=doCallBack"></script>
  15. </body>
  16. </html>
  • 上面的代码中, 我们首先定义了doCallBack()函数, 它接收一个字符串参数, 并且会把接收到的字符串显示出来.
  • 然后在<body>标签中编写<script>标签, 我们将通过<script>标签请求订单系统, 订单系统将会返回一段js代码, 这段js代码会调用doCallBack()方法.
  • 为了能够拼接出doCallBack(字符串参数...)js代码, 我们在订单系统中作如下操作.
  1. @RequestMapping("/loadOrderList3")
  2. @ResponseBody
  3. public String loadOrderList3(String uid, String callBack){
  4.     //模拟订单数据
  5.     Order o1 = new Order();
  6.     o1.setId("111");
  7.     o1.setTotal(333.33);
  8.     o1.setDate("2019-4-29");
  10.     Order o2 = new Order();
  11.     o2.setId("222");
  12.     o2.setTotal(444.44);
  13.     o2.setDate("2019-5-29");
  15.     Order o3 = new Order();
  16.     o3.setId("333");
  17.     o3.setTotal(555.55);
  18.     o3.setDate("2019-6-29");
  20.     List<Order> list = new ArrayList<>();
  21.     list.add(o1);
  22.     list.add(o2);
  23.     list.add(o3);
  25.     //拼接js代码
  26.     String result = callBack + "(" + JSON.toJSONString(list) + ")";
  27.     return result;
  28. }

?

  • 这个想法是不是很妙? 明白这个原理之后, 我们可以使用jQuery方便进行JSONP操作, 在上面的代码中我们人为指定了一个名为doCallBack的函数, 而jQuery会随机用时间戳生成一个函数名, 原理和上面是一样的.
  • 所以完成一开时点击超链接发送Ajax请求只需要如下几步.
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  6.     <script>
  7.         function sendAjax(){
  8.             $.getJSON("http://localhost:7070/order/loadOrderList3?callBack=?","uid=111",
  9.             function (data) {
  10.                 var str = JSON.stringify(data);
  11.                 alert(str);
  12.             });
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.     <a href="javascript:sendAjax()">sendAjax</a>
  18. </body>
  19. </html>

?

小结

  • 上面两种解决办法在思路上有着本质的不同. 方案一抓住CORS跨域访问问题的本质, 在后端加上响应头解决跨域问题. 方案二JSONP利用的是<script>标签能够跨域获取js代码的特性, 绕过跨域问题.

原文链接：http://www.cnblogs.com/tanshaoshenghao/p/10799042.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号