Springboot跨域問題,是當前主流web開發人員都繞不開的難題。但我們首先要明確以下幾點
- 跨域只存在於瀏覽器端,不存在於安卓/ios/Node.js/python/ java等其它環境
- 跨域請求能發出去,服務端能收到請求並正常返回結果,只是結果被瀏覽器攔截了。
- 之所以會跨域,是因爲受到了同源策略的限制,同源策略要求源相同才能正常進行通信,即協議、域名、端口號都完全一致。
瀏覽器出於安全的考慮,使用
XMLHttpRequest對象發起
HTTP請求時必須遵守同源策略,否則就是跨域的HTTP請求,默認情況下是被禁止的。換句話說,瀏覽器安全的基石是同源策略。同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。
CORS是一個W3C標準,全稱是”跨域資源共享”(
Cross-origin resource sharing
),允許瀏覽器向跨源服務器,發出XMLHttpRequest
請求,從而克服了AJAX只能同源使用的限制。它通過服務器增加一個特殊的
Header[Access-Control-Allow-Origin]
來告訴客戶端跨域的限制,如果瀏覽器支持CORS、並且判斷Origin通過的話,就會允許XMLHttpRequest發起跨域請求。CORS Header
- Access-Control-Allow-Origin: http://www.xxx.com
- Access-Control-Max-Age:86400
- Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE
- Access-Control-Allow-Headers: content-type
- Access-Control-Allow-Credentials: true
方法一、直接採用SpringBoot的註解@CrossOrigin(也支持SpringMVC)
簡單粗暴的方式,Controller層在需要跨域的類或者方法上加上該註解即可
@RestController
@CrossOrigin
@RequestMapping("/situation")
public class SituationController extends PublicUtilController {
@Autowired
private SituationService situationService;
// log日誌信息
private static Logger LOGGER = Logger.getLogger(SituationController.class);
}
但每個Controller都得加,太麻煩了,怎麼辦呢,加在Controller公共父類(PublicUtilController
)中,所有Controller繼承即可。
@CrossOrigin
public class PublicUtilController {
/**
* 公共分頁參數整理接口
*
* @param currentPage
* @param pageSize
* @return
*/
public PageInfoUtil proccedPageInfo(String currentPage, String pageSize) {
/* 分頁 */
PageInfoUtil pageInfoUtil = new PageInfoUtil();
try {
/*
* 將字符串轉換成整數,有風險, 字符串爲a,轉換不成整數
*/
pageInfoUtil.setCurrentPage(Integer.valueOf(currentPage));
pageInfoUtil.setPageSize(Integer.valueOf(pageSize));
} catch (NumberFormatException e) {
}
return pageInfoUtil;
}
}
當然,這裏雖然指SpringBoot,SpringMVC也是同樣的,但要求在Spring4.2及以上的版本。另外,如果SpringMVC框架版本不方便修改,也可以通過修改tomcat的web.xml配置文件來處理
SpringMVC使用@CrossOrigin
使用場景要求
- jdk1.8+
- Spring4.2+
方法二、處理跨域請求的Configuration
增加一個配置類,CrossOriginConfig.java
。繼承WebMvcConfigurerAdapter
或者實現WebMvcConfigurer
接口,其他都不用管,項目啓動時,會自動讀取配置。
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS).maxAge(3600);
}
}
方法三、採用過濾器(filter)的方式
同方法二加配置類,增加一個CORSFilter
類,並實現Filter接口即可,其他都不用管,接口調用時,會過濾跨域的攔截。
@Component
public class CORSFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) response;
res.addHeader("Access-Control-Allow-Credentials", "true");
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
response.getWriter().println("ok");
return;
}
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
}
補充:
方法四、採用Nignx做反向代理
Nginx作爲反向代理服務器會將請求轉發給目標服務器,並在響應中添加跨域頭信息,以達到跨域訪問目標服務器的目的。通常需要在Nginx配置文件中添加以下內容來實現跨域支持:
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
if ($request_method = 'OPTIONS') {
return 204;
}
}
其中,Access-Control-Allow-Origin
指定允許跨域訪問的源,Access-Control-Allow-Credentials
指定是否允許跨域請求攜帶cookie,Access-Control-Allow-Methods
指定允許跨域訪問的請求方法,Access-Control-Allow-Headers
指定允許的請求頭。if ($request_method = 'OPTIONS')
則用於處理預檢請求,如果請求方法爲OPTIONS,則直接返回204狀態碼。