五、先後端分離跨域問題

在以往的開發中，先後端分離也不是像如今這麼熱門，所謂的前端工程師也只不過是寫好靜態頁面由Java工程師或者php工程師嵌入到頁面中進行開發，這或許加劇了這些工程師的工做量，並且在樣式調試上由純html代碼到jsp，asp，php調試起來要兩個工程師一塊兒商量着找問題，解決起來成本也很高。先後端分離，前端工程師不單單要負責展示，並且要編寫相應的代碼使得dom渲染，網絡交互都focus在前端工程師這裏。這樣服務器端工程師則更加有精力來維護代碼的邏輯性，事務性，性能等。是啊，技術框架百花齊放的今天，前端也要mvc了。angular，vue等。下面我將自身實踐簡述如何解決跨域問題

第一種解決方案jsonp(不推薦使用)

這種方案其實我是不贊同的，第一，在編碼上jsonp會單獨由於回調的關係，在傳入傳出還有定義回調函數上都會有編碼的」不整潔」.簡單闡述jsonp可以跨域是由於javascript的script標籤，經過服務器返回script標籤的code，使得該代碼繞過瀏覽器跨域的限制。而且在客戶端頁面按照格式定義了回調函數，使得script標籤返回實現調用

第二種方案，反向代理(推薦使用)

代理訪問其實在實際應用中有不少場景，在跨域中應用的原理作法爲：經過反向代理服務器監聽同端口，同域名的訪問，不一樣路徑映射到不一樣的地址，好比，在nginx服務器中，監聽同一個域名和端口，不一樣路徑轉發到客戶端和服務器，把不一樣端口和域名的限制經過反向代理，來解決跨域的問題，案例以下：

server {
        listen       80;
        server_name  domain.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location /client { #訪問客戶端路徑
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
        location /apis { #訪問服務器路徑
            rewrite  ^/apis/(.*)$ /$1 break;
            proxy_pass   http://localhost:82;
       }
}

第三種方案在server設置header

經過設置server的header來設置瀏覽器對於服務器跨域的限制，具體實現以下:

//統一過濾器設置
public class DomainFilter  implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @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");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {

    }
}


//spring boot過濾器設置
    @Bean
    public FilterRegistrationBean filterRegistrationBean() {
        FilterRegistrationBean registrationBean = new FilterRegistrationBean();
        DomainFilter domainFilter = new DomainFilter();
        registrationBean.setFilter(domainFilter);
        List<String> urlPatterns = new ArrayList<String>();
        urlPatterns.add("/*");
        registrationBean.setUrlPatterns(urlPatterns);
        return registrationBean;
    }