先後端分離解決Ajax跨域問題

1、同源策略

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。
同源策略的目的是爲了保證用戶信息的安全。防止惡意的網站盜取數據。

---

2、經過CORS解決Ajax跨域

CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標準，是跨源AJAX請求的根本解決方法。相比JSONP只能發GET請求，CORS容許任何類型的請求。

假設環境爲先後端分離的web環境：

• 前端：使用Vue的axios異步請求後臺數據
• 後端：Spring+SpringMVC
• 服務器：Tomcat

注意：服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。若是瀏覽器檢測到相應的設置，就能夠容許Ajax進行跨域的訪問，所以可配置過濾器的方式解決Ajax跨域。

• 一、在web.xml中配置過濾器

<!-- 支持跨域請求 -->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.joker.support.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

---

• 二、實現過濾器

public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.addHeader("Access-Control-Allow-Credentials", "*");
        httpResponse.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH");
        httpResponse.addHeader("Access-Control-Allow-Headers", "Content-Type," + "x-access-token");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}