ajax怎么实现跨域?ajax实现跨域问题解决方案

阳光 2022-03-22 16:43:00 java常见问答 5300

Ajax 是一种独立于 Web 服务器软件的浏览器技术,它可使因特网应用程序更小、更快,更友好。但是ajax是不能实现跨域的,不过我们可以通过其他方案来实现,那下面我们就给大家讲解一下ajax实现跨域问题解决方案!

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

既然我们已经知道了Ajax跨域失败是因为响应中缺少了响应头Access-Control-Allow-Origin, 那么就想办法加上去.

以Java项目为例, 在后端我们使用CORSFilter过滤器加上该响应头.

(假设是Maven项目), 首先在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怎么实现跨域?ajax实现跨域问题解决方案.png

1.png

二. 使用JSONP解决

上面直接通过过滤器添加响应头的方法可以说是对症下药, 那么还有没有什么偏方呢?

还真的有. 在jsp文件中经常通过通过

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
  function doCallBack(data){
   var str = JSON.stringify(data);
   alert(str);
  }
 </script>
</head>
<body>
 <script src="http://localhost:7070/order/loadOrderList3?uid=111&callBack=doCallBack"></script>
</body>
</html>

上面的代码中, 我们首先定义了doCallBack()函数, 它接收一个字符串参数, 并且会把接收到的字符串显示出来.

然后在<body>标签中编写<script>标签, 我们将通过<script>标签请求订单系统, 订单系统将会返回一段js代码, 这段js代码会调用doCallBack()方法.

为了能够拼接出doCallBack(字符串参数...)js代码, 我们在订单系统中作如下操作.

@RequestMapping("/loadOrderList3")
@ResponseBody
public String loadOrderList3(String uid, String callBack)
{
    //模拟订单数据
    Order o1 = new Order();
    o1.setId("111");
    o1.setTotal(333.33);
    o1.setDate("2019-4-29");
    Order o2 = new Order();
    o2.setId("222");
    o2.setTotal(444.44);
    o2.setDate("2019-5-29");
    Order o3 = new Order();
    o3.setId("333");
    o3.setTotal(555.55);
    o3.setDate("2019-6-29");
    List < Order > list = new ArrayList < > ();
    list.add(o1);
    list.add(o2);
    list.add(o3);
    //拼接js代码
    String result = callBack + "(" + JSON.toJSONString(list) + ")";
    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://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
  function sendAjax(){
   $.getJSON("http://localhost:7070/order/loadOrderList3?callBack=?","uid=111",
   function (data) {
    var str = JSON.stringify(data);
    alert(str);
   });
  }
 </script>
</head>
<body>
 <a href="javascript:sendAjax()">sendAjax</a>
</body>
</html>

ajax实现跨域可以利用以上这两种方法进行解决,第一种主要就是在后端加上响应头解决跨域问题. 第二种主要就是绕过跨域来实现跨域。最后大家如果想要了解更多其他工具教程知识,敬请关注奇Q工具网。

推荐阅读:

java写excel文件后缀名不对怎么解决?java如何导入excel?

java线程面试题有哪些?java线程面试题及答案

struts怎么找回密码?struts如何创建password?