四川红网

  1. 首页 > 生活经验 > >

Ajax跨域问题及解决方案

生活百科生活知道

目录

  • 复现Ajax跨域问题
  • Ajax跨域介绍
  • Ajax跨域解决方案
  • 一. 在服务端添加响应头Access-Control-Allow-Origin
  • 二. 使用JSONP解决
  • 小结
复现Ajax跨域问题
  • 做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java
  • 首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口.
@RequestMapping
@ResponseBody
public List<Order> loadOrderList{
//模拟订单数据
Order o1 = new Order;
o1.setId;
o1.setTotal;
o1.setDate;
Order o2 = new Order;
o2.setId;
o2.setTotal;
o2.setDate;
Order o3 = new Order;
o3.setId;
o3.setTotal;
o3.setDate;
List<Order> list = new ArrayList<>;
list.add;
list.add;
list.add;
return list;
}
  • 在另一个项目中做一个向订单系统发送一个ajax请求, 获取订单集合. 该项目使用Tomcat插件发布在9090端口.
//index.jsp
<%@ page contentType=\”text/html;charset=UTF-8\” language=\”java\” %>
<html>
<head>
<title>Title</title>
<script type=\”text/javascript\” src=https://www.30zx.com/”https://code.jquery.com/jquery-1.11.3.js/”>
<script type=\”text/javascript\”>
function sendAjax {
$.post {
alert;
});
}
</script>
</head>
<body>
<a href=\”javascript:sendAjax\”>sendAjax</a>
</body>
</html>
  • 点击sendAjax超链接向订单系统发送ajax请求.
  • 通过开发者工具发现虽然服务器以状态码200响应回来, 但是控制台却报错了.
  • 这就是Ajax跨域出错的一种表现, 下面分析原因.
Ajax跨域介绍
  • Ajax跨域问题是由浏览器的同源策略造成的, 首先要理解源这个概念.
  • 我们可以通过协议+域名+端口确定一个源. 在上面的示例中, 你可以把一个项目理解为一个源. Ajax请求可以对源内的资源发起访问, 但是不同源之间进行Ajax就会有问题.
  • 当向不同源的资源发起Ajax请求时, 浏览器会加上Origin字段来标识源
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 8
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: localhost:7070
Origin: http://localhost:9090 协议+域名+端口
  • 服务器会根据Origin字段决定是否同意这次请求, 如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应. 浏览器解析时发现缺少了这个字段, 就会报错. 这种错误不能通过状态码识别, 因为状态码很有可能就是200.
Ajax跨域解决方案
  • 下面介绍最常用Ajax跨域解决方案.
一. 在服务端添加响应头Access-Control-Allow-Origin
  • 既然我们已经知道了Ajax跨域失败是因为响应中缺少了响应头Access-Control-Allow-Origin, 那么就想办法加上去.
  • 以Java项目为例, 在后端我们使用CORSFilter过滤器加上该响应头.
  • , 首先在pom.xml中添加坐标
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.5</version>
<scope>runtime</scope>
</dependency>
  • 然后在web.xml中对过滤器进行配置.
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name><!–这个标签是关键, *代表所有源都能访问–>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
  • 配置后重启订单项目, 再次发起Ajax请求可以看到成功返回数据, 响应头中包含了Access-Control-Allow-Origin, 值为发起Ajax请求的源.
【Ajax跨域问题及解决方案】二. 使用JSONP解决
  • 上面直接通过过滤器添加响应头的方法可以说是对症下药, 那么还有没有什么偏方呢?
  • 还真的有. 在jsp文件中经常通过通过<script>标签引入一段js代码, 这段代码通常来源于网络, 也就是不同源. 那么我们不妨通过<srcipt>标签完成Ajax请求, 这样便顺带解决了跨域问题.
  • 下面还是沿用上面的案例进行演示.
  • 我们对发送ajax的jsp进行修改
<%@ page contentType=\”text/html;charset=UTF-8\” language=\”java\” %>
<html>
<head>
<title>Title</title>
<script type=\”text/javascript\” src=https://www.30zx.com/”https://code.jquery.com/jquery-1.11.3.js/”>
<script>
function doCallBack{
var str = JSON.stringify;
alert;
}
</script>
</head>
<body>
<script src=https://www.30zx.com/”http://localhost:7070/order/loadOrderList3?uid=111&callBack=doCallBack\”>
</body>
</html>
  • 上面的代码中, 我们首先定义了doCallBack函数, 它接收一个字符串参数, 并且会把接收到的字符串显示出来.
  • 然后在<body>标签中编写<script>标签, 我们将通过<script>标签请求订单系统, 订单系统将会返回一段js代码, 这段js代码会调用doCallBack方法.
  • 为了能够拼接出doCallBackjs代码, 我们在订单系统中作如下操作.
@RequestMapping
@ResponseBody
public String loadOrderList3{
//模拟订单数据
Order o1 = new Order;
o1.setId;
o1.setTotal;
o1.setDate;
Order o2 = new Order;
o2.setId;
o2.setTotal;
o2.setDate;
Order o3 = new Order;
o3.setId;
o3.setTotal;
o3.setDate;
List<Order> list = new ArrayList<>;
list.add;
list.add;
list.add;
//拼接js代码
String result = callBack + \” + \”)\”;
return result;
}
  • 这个想法是不是很妙? 明白这个原理之后, 我们可以使用jQuery方便进行JSONP操作, 在上面的代码中我们人为指定了一个名为doCallBack的函数, 而jQuery会随机用时间戳生成一个函数名, 原理和上面是一样的.
  • 所以完成一开时点击超链接发送Ajax请求只需要如下几步.
<%@ page contentType=\”text/html;charset=UTF-8\” language=\”java\” %>
<html>
<head>
<title>Title</title>
<script type=\”text/javascript\” src=https://www.30zx.com/”https://code.jquery.com/jquery-1.11.3.js/”>
<script>
function sendAjax{
$.getJSON {
var str = JSON.stringify;
alert;
});
}
</script>
</head>
<body>
<a href=\”javascript:sendAjax\”>sendAjax</a>
</body>
</html>
小结
  • 上面两种解决办法在思路上有着本质的不同. 方案一抓住CORS跨域访问问题的本质, 在后端加上响应头解决跨域问题. 方案二JSONP利用的是<script>标签能够跨域获取js代码的特性, 绕过跨域问题.
以上就是朝夕生活（www.30zx.com）关于“Ajax跨域问题及解决方案”的详细内容 ， 希望对大家有所帮助！

猜你喜欢

上一篇：老抚顺之高等女学校

下一篇：奥迪A4L冷车发抖、漏机油、链条哗啦啦响、轻微烧机油一次性解决