Access-Control-Allow-Origin 跨域問題

　　　1.同源、同源策略（Same origin policy）

　　　　同源指的是協議，端口，域名全部相同。

　　　　同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。 

　　　2.跨域

　　　　Web 瀏覽器具有一個稱為相同站點源策略的安全策略，此策略可阻止網頁訪問另一個域中的數據。 網站通常會讓其服務器在后端請求其他站點服務器中的內容，由此避開瀏覽器中的檢查，從而繞開此策略。

　　　3.前端跨域

　　　　通過前端方案繞開瀏覽器的安全策略，在不同的域之間進行數據傳輸或通信，比如用ajax向一個不同的域請求數據，或者通過js獲取頁面中不同域的框架(iframe)中的數據。

　　　跨域解決辦法：

　　　　1.瀏覽器目標添加命令，允許跨域訪問（此種方案只適合個人）：

　　　　　　第一種：--allow-file-access-from-files

　　　　　　第二種：--disable-web-security

　　　　2.后台配置web.xml過濾器（不推薦）　　　　　　

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.itxc.filter.CORSFilter</filter-class>
</filter> 
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

　　　　

<!-- 支持跨域 -->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE, OPTIONS</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

　　　　3.配置Nginx代理服務器（推薦）

　　　　　　具體查看配置Nginx文章 

　　　　4.JSONP方法，JSONP方法是一種非官方方法，而且這種方法只支持GET方式，不如POST方式安全。在被請求的Response header中加入header參數就可以實現ajax POST跨域訪問了。

　　　　　　// 指定允許其他域名訪問 

　　　　　　header('Access-Control-Allow-Origin:*'); 

　　　　　　// 響應類型 

　　　　　　header('Access-Control-Allow-Methods:POST'); 

　　　　　　// 響應頭設置 

　　　　　　header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

　　　　　　Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問

　　　　　　如果需要指定某域名才允許跨域訪問，只需把Access-Control-Allow-Origin:*改為Access-Control-Allow-Origin:允許的域名

　　　　5.通過iframe 方式跨域訪問，具體不做詳解。 

　　　　總結：傳統的跨域請求沒有好的解決方案，無非就是jsonp和iframe，隨着跨域請求的應用越來越多，W3C提供了跨域請求的標准方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以后的版本、Chrome瀏覽器、Safari 4 等已經實現了 Cross-Origin Resource Sharing 規范，實現了跨域請求。在服務器響應客戶端的時候，帶上Access-Control-Allow-Origin頭信息。

　　　　如果設置 Access-Control-Allow-Origin:*，則允許所有域名的腳本訪問該資源。

　　　　Access-Control-Allow-Origin:http://www.phpddt.com.com,允許特定的域名訪問

　　　　配置服務器配置信息：　　　　

<system.web>
    <!--提供Web服務訪問方式-->
    <webServices>
      <protocols>
        <add name="HttpSoap"/>
        <add name="HttpPost"/>
        <add name="HttpGet"/>
        <add name="Documentation"/>
      </protocols>
    </webServices>
 </system.web>

 

<configuration>
 <system.webServer>  
    <httpProtocol>   
    <customHeaders>   
      <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>   
      <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>   
      <add name="Access-Control-Allow-Origin" value="*" /> //* 是任意網站可以跨域，加域名可以指定域名跨域。
    </customHeaders>   
  </httpProtocol>   
  <modules>  
    <add name="MyHttpModule" type="WebServiceDemo.MyHttpModule"/>  
  </modules>
  </system.webServer>  
</configuration>

 

備注：
作者：Shengming Zeng
博客：http://www.cnblogs.com/zengming/

本文是原創，歡迎大家轉載；但轉載時必須注明文章來源，且在文章開頭明顯處給明鏈接。
<歡迎有不同想法或見解的同學一起探討，共同進步>