【跨域】Ajax調用 跨域問題

什麼是跨域?

同源策略:域名、協議、端口都要相同。
首先什麼是跨域,簡單地理解就是因爲JavaScript同源策略的限制,a.com 域名下的js無法操作b.com或是c.a.com域名下的對象。更詳細的說明可以看下錶:
這裏寫圖片描述

因此當我在本機發佈一個webservice服務,本機用javascript調用chrome下還是有跨域問題,因爲端口不同。

如何解決這個問題:

前端:

ajax,的jsonp方法,但這個方法不適合調用webservice服務,webservice服務都是遵從soap協議的,以xml格式的方式組織數據,因此利用ajax調用webservice服務datatype必須爲xml,content-type必須爲text/xml,因此不能用這種方法解決跨域問題。(這個方法適用於nodejs發佈的http服務,參考另一篇日誌)
前端還有好多其他的方法。參考博客是否可以用jsonp完成跨域? nodejs發佈的服務可以

後端:

即配置服務端,允許來自其他域的訪問。採用CORS方法。
CORS介紹

它在維基百科上的定義是:跨域資源共享(CORS )是一種網絡瀏覽器的技術規範,它爲Web服務器定義了一種方式,允許網頁從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。CORS系統定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。 它是一個妥協,有更大的靈活性,但比起簡單地允許所有這些的要求來說更加安全。

而W3C的官方文檔目前還是工作草案,但是正在朝着W3C推薦的方向前進。

簡言之,CORS就是爲了讓AJAX可以實現可控的跨域訪問而生的。

配置步驟:

1、下載cors-filter-1.7.jar,java-property-utils-1.9.jar這兩個庫文件,放到C:\Users\Administrator\Workspaces\MyEclipse 8.6\LicanTest\WebRoot\WEB-INF\lib目錄下。
2、配置C:\Users\Administrator\Workspaces\MyEclipse 8.6\LicanTest\WebRoot\WEB-INF目錄下的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>

此時配置好後,重啓服務,就可以跨域訪問了,chrome下沒有問題。

發佈了75 篇原創文章 · 獲贊 26 · 訪問量 32萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章