springmvc ajax tomcat簡單配置實現跨域訪問

發現一種改動最小也能實現跨域請求的方法

服務端

服務端修改web.xml配置文件, 增加過濾器 (不用導入任何jar包, 用的tomcat自帶jar)

<!-- 支持跨域請求 -->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

服務端controller使用@RequestBody來獲取參數

@RequestMapping("/get_json.html")
public void commonGetJson(@RequestBody String json,HttpServletRequest request,HttpServletResponse response){
    System.out.println(json);
    // 輸出json格式字符串
    // {"parameter":{"userName":"17737190001","userPass":"6e316845103d21d700aceecdba7eadae"},"version":100,"opcode":"U00006"}
}

 

客戶端

使用jquery的ajax, 設置crossDomain為true, 允許跨域訪問 , 下面的jquery庫引用的百度靜態資源庫

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
        $.ajax({
            url:"http://192.168.16.20:8080/zyzp-web-router/common/get_json.html",
            data:JSON.stringify({"parameter":{"userName":"17737190001","userPass":"6e316845103d21d700aceecdba7eadae"},"version":100,"opcode":"U00006"}),
            dataType:"text",
            type:"POST",
            crossDomain:true,
            contentType:"application/json;charset=UTF-8",
            success:function(data){
                console.log(data);
            }
        });
    });
</script>

- JSON.stringify 將json對象轉換為json字符串
- crossDomain:true 設置允許跨域請求
- contentType:"application/json;charset=UTF-8" 設置發送給服務器時的內容編碼類型

 

配置好服務端后, 直接在瀏覽器運行這段js代碼, 就能跨域訪問到服務器的數據

其它還有jsonp方式, 在<mvc:annotation-driven>中配置轉化器, 如果鏈接中存在callback參數a , 那么就輸出js代碼

a({"userId":1});

 

 

 

 

如需幫助可向我發起QQ聊天發起QQ聊天

友情贊助

如果您喜歡此文，感覺對您工作有幫助，預期領導會給您漲工資，不妨小額贊助一下，讓我有動力繼續努力。

贊助方式：打開支付寶App，使用“掃一掃”付款，付款碼見下圖，別忘了付款留言哦！

或使用微信, 不用加好友就能付款