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>