標籤:用戶端 圖片 col 資訊 方法 服務端 而不是 開發 port
〇、遇到跨域安全問題
在學習SpringBoot過程中,遇到了這樣一個問題。當時用SpringBoot開發Rest服務介面,然後用Ajax請求擷取資料,來實現前後端分離。但是在前端請求時,始終不能顯示應該顯示的資料。從瀏覽器的控制台報錯來看(如),應該是遇到了跨域安全的問題。
一、為什麼會出現跨域安全問題?
要解決這個問題,首先得知道為什麼會出現這個問題。通過瞭解,出現跨域安全問題的原因一般是以下三個問題:瀏覽器收到了正確的返回資料但是做出了限制、發出去的請求是XMLHttpRequest請求而不是JSON請求、前後端協議網域名稱連接埠等不一樣造成了跨域。
二、怎麼去解決出現的跨域安全問題? 根據上面的三個問題,去解決這次出現的跨域安全問題。 1. 讓瀏覽器不去做限制 不同的瀏覽器應該有不同的設定參數的方法。例如Google瀏覽器就是disable-web-security。不過我們在應用中應該不會讓我們的使用者去改瀏覽器的參數,所以我沒有採用這種方法。 2. 讓發出去的請求不是XMLHttpRequest請求 在網上搜了一下,不少解決方案是把請求資料類型設為JSONP。但是存在一個問題就是如果用JSONP類型請求那麼背景服務介面也要做改動,因為用JSONP資料類型的請求雖然不是XHR但也不是JSON而是Script。而我想用的是JSON來實現前後端傳輸資料,而且JSONP對GET方式以外的請求不支援(我想用REST啊怎麼可以木有POST\PUT\DELETE),所以我也沒有採用這種方法。 3. 解決前後端協議網域名稱連接埠等不一樣造成的跨域。 解決跨域可以從用戶端考慮,也可以從服務端考慮。從用戶端考慮,可以用代理來將服務端的請求轉換成與用戶端相同的域的請求從而解決跨域問題;從服務端考慮,可以考慮在回應標頭裡增加欄位。因為服務端就是我用SpringBoot寫的,而增加欄位並不需要對每個介面進行改動,只要添加一個攔截器在所有的返回裡添加返回頭就可以了。當然,如果是調用別人家的介面,無法改動別人的服務端,那就只能考慮在用戶端這邊加代理了。 根據控制台的錯誤資訊,可以在服務端添加要求標頭Access-Control-Allow-Origin,來告訴瀏覽器服務端允許這個跨域。SpringBoot中我用的實現方式是增加一個Filter來攔截所有的請求在返回頭裡添加Access-Control-Allow-Origin和Access-Control-Allow-Method欄位。案例代碼如下(僅供參考):
1 /*SpringBoot啟動類*/ 2 package net.tsingmo.SpringBootDemo; 3 4 import org.springframework.boot.SpringApplication; 5 import org.springframework.boot.autoconfigure.SpringBootApplication; 6 import org.springframework.boot.web.servlet.FilterRegistrationBean; 7 import org.springframework.context.annotation.Bean; 8 9 @SpringBootApplication10 public class SpringBootDemoApplication {11 12 public static void main(String[] args) {13 SpringApplication.run(SpringBootDemoApplication.class, args);14 }15 16 @Bean17 public FilterRegistrationBean filterRegistrationBean () {18 FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();19 filterRegistrationBean.addUrlPatterns("/*");20 filterRegistrationBean.setFilter(new ResponseHeaderFilter());21 return filterRegistrationBean;22 }23 }
1 /*ResponseHeaderFilter類*/ 2 package net.tsingmo.SpringBootDemo; 3 4 import javax.servlet.*; 5 import javax.servlet.http.HttpServletResponse; 6 import java.io.IOException; 7 8 public class ResponseHeaderFilter implements javax.servlet.Filter { 9 @Override10 public void init(FilterConfig filterConfig) throws ServletException {}11 12 @Override13 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {14 HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;15 httpServletResponse.addHeader("Access-Control-Allow-Origin", "*");16 httpServletResponse.addHeader("Access-Control-Allow-Methods", "GET");17 filterChain.doFilter(servletRequest, httpServletResponse);18 }19 20 @Override21 public void destroy() {}22 }
SpringBoot+Ajax跨域安全問題及解決方案