Ajax跨域问题及解决方案

时间 2019-11-21

标签 ajax 问题解决方案栏目 Ajax 繁體版

原文原文链接

目录javascript

复现Ajax跨域问题

作两个简单的小项目复现Ajax跨域问题. 后端语言使用Java
首先是一个简单的订单系统, 经过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口.

@RequestMapping("/loadOrderList")
@ResponseBody
public List<Order> loadOrderList(String uid){
    //模拟订单数据
    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);

    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://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        function sendAjax() {
            $.post("http://localhost:7070/order/loadOrderList", "uid=1234", function (data) {
                alert(data);
            });
        }
    </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过滤器加上该响应头.
(假设是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请求的源.

二. 使用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://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>

小结

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

Ajax跨域问题及解决方案

复现Ajax跨域问题

Ajax跨域介绍

Ajax跨域解决方案

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

二. 使用JSONP解决

小结

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