1. 程式人生 > >SpringBoot+Ajax跨域安全問題及解決方法

SpringBoot+Ajax跨域安全問題及解決方法

谷歌瀏覽器 響應 dem -o 開發 數據 sin -a filter

〇、遇到跨域安全問題

  在學習SpringBoot過程中,遇到了這樣一個問題。當時用SpringBoot開發Rest服務接口,然後用Ajax請求獲取數據,來實現前後端分離。但是在前端請求時,始終不能顯示應該顯示的數據。從瀏覽器的控制臺報錯來看(如下圖),應該是遇到了跨域安全的問題。

技術分享圖片

技術分享圖片

技術分享圖片一、為什麽會出現跨域安全問題?

  要解決這個問題,首先得知道為什麽會出現這個問題。通過了解,出現跨域安全問題的原因一般是以下三個問題:瀏覽器收到了正確的返回數據但是做出了限制、發出去的請求是XMLHttpRequest請求而不是JSON請求、前後端協議域名端口等不一樣造成了跨域。

二、怎麽去解決出現的跨域安全問題?

  根據上面的三個問題,去解決這次出現的跨域安全問題。

  1. 讓瀏覽器不去做限制

  不同的瀏覽器應該有不同的設置參數的方法。例如谷歌瀏覽器就是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 @SpringBootApplication
10 public class SpringBootDemoApplication {
11 
12     public static void main(String[] args) {
13         SpringApplication.run(SpringBootDemoApplication.class, args);
14     }
15 
16     @Bean
17     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     @Override
10     public void init(FilterConfig filterConfig) throws ServletException {}
11 
12     @Override
13     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     @Override
21     public void destroy() {}
22 }

SpringBoot+Ajax跨域安全問題及解決方法