四種JS跨域解決方案及其實現原理

當進行前後端分離開發時，可能會預見JS跨域請求的問題

經過查找實踐，有如下的四種解決方法：

1、Jsonp

     JSONP 是 JSON 的一種使用模式，可以解決主流瀏覽器的跨域數據訪問問題。

    實際開發中代碼如下：

layui.use(['form','jquery'], function (form,$) {
    //監聽提交
    form.on('submit(login)', function () {
        //layer.msg($('#login_form').serialize());
        $.post("http://localhost:8080/rbac-rest-service/rbac/account/login",
            $('#login_form').serialize(),
            function (data) {
                //alert(data.code + data.message);
                if (data.code == 200) {
                    layui.data('test',{
                        key : 'id'
                        ,value : data.data.userid
                    })
                    window.location.href = "indexModify.html";
                }
            },
            "JSONP"
        );
        return false;
    });
});

1.1 JSONP的原理

在使用Ajax去處理請求時，原則上是不允許跨域的，也就是說，請求必須是同源的信息。什麼是同源呢？同源指的是：同協議，同域名和同端口。基於安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性。那如果我們需要去請求不同源的內容，也就是如何去處理跨域請求呢？

假如在http://localhost/8080上我們有一個前端頁面，在http://localhost/80上有一個JavaWeb項目，我們可以在JavaWeb把我們需要的數據封裝成Json顯示在80上。而8080根據js的某些允許跨域的屬性，去訪問http://localhost/80中的json,這個時候8080其實定義了一個js方法，在80上把json封裝到js方法的入參中，並以調用的形式去實現，這樣在8080上就可以取到80的數據了。

具體原理看此篇博客，寫的很好，就不重造輪子了。

http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

2-3 序幕

下面的兩個方法是Spring中解決跨域請求的。事實上，不允許跨域的基本原因是http請求頭中沒有允許跨域有關的參數。Spring中解決跨域請求的原理就是在攔截器中攔截請求，請在Http請求頭添加允許跨域的字段。原理如下，講解的也非常清晰，重複造輪子有罪https://www.cnblogs.com/softidea/p/6108066.html

2 . SpringMVC的配置文件中加入配置

<mvc:cors>
  <mvc:mapping path="/**" allowed-origins="*" allowed-methods="*"/>
</mvc:cors>

這裏需要注意的是 allowed-origins="*" 只是允許跨域，但是隻支持跨域的方法爲get，所以我們需要配置跨域的方法 allowed-methods="*" 使得所有的HttpMethod均可以支持跨域

3.  使用註解

在service層對應的方法上加入 @CrossOrigin(origins = "*", maxAge = 3600) ,這裏要強調的是springMVC的版本要在4.2或以上版本才支持@CrossOrigin

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value="/findMune/{id}",method = RequestMethod.GET)
@ApiOperation("查找對應的菜單id")
public Result selectMuneId(@PathVariable Integer id){
  return ResultGenerator.genSuccessResult(accountService.selectMenuThingsByUserID(id));

4.web-xml中配置過濾器：

參考資料https://segmentfault.com/a/1190000009512081