跨域問題，解決方案 - CORS方案

時間 2019-11-17

標籤問題解決方案 cors 简体版

原文原文鏈接

原文地址：跨域問題，解決方案 - CORS方案
博客地址：blog.720ui.com/javascript

跨域問題，解決之道

解決思路

CORS 全稱爲 Cross Origin Resource Sharing（跨域資源共享）。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，但用戶不會有感受。所以，實現CORS通訊的關鍵是服務端。服務端只需添加相關響應頭信息，便可實現客戶端發出 AJAX 跨域請求。web

值得注意的是，瀏覽器必須先以 OPTIONS 請求方式發送一個預請求，從而獲知服務器端對跨源請求所支持 HTTP 方法。在確認服務器容許該跨源請求的狀況下，以實際的 HTTP 請求方法發送那個真正的請求。跨域

CORS涉及的響應頭

Access-Control-Allow-Origin

容許訪問的客戶端域名，例如：blog.720ui.com，若爲星形標示號，則表示從任意域都能訪問，即不作任何限制。值得注意的是，Access-Control-Allow-Origin 只容許兩種取值，一個是星形標示號，一個是具體的域名，不支持同時配置多個域名。瀏覽器

Access-Control-Allow-Methods

容許訪問的方法名，多個方法名用逗號分割，例如：GET,POST,PUT,DELETE,OPTIONS。緩存

Access-Control-Allow-Credentials

是否容許請求帶有驗證信息，若要獲取客戶端域下的 cookie 時，須要將其設置爲 true。服務器

Access-Control-Max-Age

能夠用於 CORS 相關配置的緩存。微信

Access-Control-Allow-Headers

容許服務端訪問的客戶端請求頭，多個請求頭用逗號分割，例如：Content-Type。cookie

解決跨域問題

首先，咱們須要編寫一個 Filter，過濾全部的 HTTP 請求，將 CORS 響應頭寫入 response 對象中。app

public class CORSFilter implements Filter {  
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods",
        "GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, PATCH");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", 
        "Origin, Accept, X-Requested-With, Content-Type, 
        Access-Control-Request-Method, Access-Control-Request-Headers, 
        Authorization, Cache-control");  
        chain.doFilter(req, res);  
    }  

    public void init(FilterConfig filterConfig) {}  

    public void destroy() {}  

}複製代碼

而後，在 web.xml 中配置 CorsFilter 的過濾器。

<filter>  
  <filter-name>corsFilter&lt;/filter-name>  
  <filter-class>com.lianggzone.core.filter.CorsFilter&lt;/filter-class>  
</filter>  
<filter-mapping>  
  <filter-name>corsFilter&lt;/filter-name>  
  <url-pattern>/*&lt;/url-pattern>  
</filter-mapping>複製代碼

完成上面兩個步驟，便可實現跨域功能。這樣跨多個域的問題就輕鬆解決了。