跨域問題及解決方案

以前學習寫後臺的時候，與前端溝通的時候，前端有一次反映過出現了跨域的問題（實際上沒出現），這勾起了我對跨域這個東西的興趣。由於以前在學校學前端的時候，有一次出現了跨域的問題，慌得不行，因此就決定上網衝浪研究一下跨域這個東西。

跨域問題的出現

跨域指的是瀏覽器從一個域名的網頁請求另外一個域名時，域名、端口、協議任一不一樣，都是跨域。

看了一下網上的資料，大概都是說，跨域問題的出現：主要是由於瀏覽器的同源策略。

瀏覽器的同源機制

同源機制是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。

前端請求的url必須與瀏覽器的url處於同域，也就是它們二者的域名、端口、協議必須相同。

同源策略限制如下行爲：

1. Cookie、LocalStorage和IndexDB沒法讀取
2. DOM和JS對象沒法獲取
3. AJAX請求不能發送

解決方案

在網上看到很多關於跨域的解決方案，在這裏講以前後臺大佬解決跨域問題的方案：

CORS(跨域資源共享)：

在服務端設置Access-Control-Allow-Origin HTTP響應頭部以後，瀏覽器將會容許跨域請求。

@Override
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",
            "POST, GET, OPTIONS, DELETE, PUT");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers",
            "Content-Type, x-requested-with, X-Custom-Header, Authorization, token");
    chain.doFilter(req, res);
}複製代碼