前後端分離跨域問題解決方案
阿新 • • 發佈:2018-12-31
宣告:
在以往的開發中,前後端分離也不是像現在這麼熱門,所謂的前端工程師也只不過是寫好靜態頁面由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;
}