js前端跨域訪問


什麼是 CORS ?

跨來源資源共享(Cross-origin resource sharing)是一份瀏覽器技術的規範,提供了 Web 服務從不同域傳來沙盒腳本的方法,以避開瀏覽器的同源策略,是 JSONP 模式的現代版。與 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以讓網頁設計師用一般的 XMLHttpRequest,這種方式的錯誤處理比 JSONP 要來的好。
以上內容摘自維基百科

用人話來解釋就是:JavaScript 或 Cookies 不允許訪問不同域名下面的內容,當我們想在兩個不同域名之前相互通信的話,我們就要考慮跨域這個問題,這也是在通往一個優秀的前端的路上必不可少的過程,如果你只會有 JSONP 的話,那真是令人傷感的,因爲 JSONP 是不支持 POST 請求的,所以,在科技發展的今天突然出現了 CORS 這項技術,好像就不需要前端什麼事情了,我們可以幫他搞定跨域這個頭疼的問題。其實是很簡單的一項技術。

怎麼使用呢?

據我所知道的是有三種方式:Tomcat 配置、攔截器設置響應頭和使用 Spring MVC 4.2+

設置 Tomcat 這種方式就是引用別人封裝好的兩個 jar 包,配置一下web.xml就行了。我也並不推薦,這裏放兩個我在網上找到的配置相關文章,感興趣可以看看。

  1. CORS Filter Installation

  2. tomcat下CORS(跨域資源共享) 的配置

攔截器設置響應頭 這種方式原理就是利用攔截器在方法執行前,我們增加請求的響應頭,用來支持跨域請求。這種方案是可行的,大部分都是採用這種方案。我當時也是打算採用這種 方案,直到我發現原來 Spring 框架已經支持了 CORS 之後,就果斷採用了 Spring 框架的內置的方案,其實原理也是一樣的。

直接配置即可:

    <!-- API 接口跨域配置 --><mvc:cors>  
    <mvc:mapping path="/api/**"
        allowed-origins="*"
        allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
        allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
        allow-credentials="true" /></mvc:cors>

當然你也可以在Controller上使用 @CrossOrigin 註解。類似於這樣:

cors.png

到這裏,支持 CORS 跨域請求就配置完成了,這裏需要注意的地方是,你的Spring MVC 版本必須是 4.2 及以上


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章