Springboot解決Ajax跨域的三種方式
這篇文章不華麗，但比較實用，能解決不少大家實際業(yè)務中的問題。大家可以收藏起來，以備用時之需！
1.同源策略
1.1 含義
ajax出現(xiàn)請求跨域錯誤問題，主要原因就是因為瀏覽器的“同源策略”；1995年，同源政策由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實行這個政策。
最初，它的含義是指，A網(wǎng)頁設(shè)置的 Cookie，B網(wǎng)頁不能打開，除非這兩個網(wǎng)頁"同源"。所謂"同源"指的是"三個相同"。
協(xié)議相同
域名相同
端口相同
舉例來說，http://www.example.com/dir/page.html這個網(wǎng)址，協(xié)議是http://，域名是www.example.com，端口是80（默認端口可以省略）。它的同源情況如下：
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
1.2 目的
同源策略的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
設(shè)想這樣一種情況：A網(wǎng)站是一家銀行，用戶登錄以后，又去瀏覽其他網(wǎng)站。如果其他網(wǎng)站可以讀取A網(wǎng)站的 Cookie，會發(fā)生什么？很顯然，如果 Cookie 包含隱私（比如存款總額），這些信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態(tài)，如果用戶沒有退出登錄，其他網(wǎng)站就可以冒充用戶，為所欲為。因為瀏覽器同時還規(guī)定，提交表單不受同源政策的限制。
由此可見，"同源策略"是必需的，否則 Cookie 可以共享，互聯(lián)網(wǎng)就毫無安全可言了。
1.3 限制范圍
隨著互聯(lián)網(wǎng)的發(fā)展，"同源政策"越來越嚴格。目前，如果非同源，共有三種行為受到限制。
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發(fā)送。
2.解決Ajax請求不能發(fā)送的問題
本文只關(guān)注Ajax請求跨域問題，想了解更多可以參考：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
同源政策規(guī)定，AJAX請求只能發(fā)給同源的網(wǎng)址，否則就報錯。
除了架設(shè)服務器代理（瀏覽器請求同源服務器，再由后者請求外部服務），有三種方法規(guī)避這個限制。
JSONP
WebSocket
CORS：(H5中的新特性：Cross-Origin Resource Sharing（跨域資源共享）。通過它，我們的開發(fā)者（主要指后端開發(fā)者）可以決定資源是否能被跨域訪問。cors是一個w3c標準，它允許瀏覽器（目前ie8以下還不能被支持）像我們不同源的服務器發(fā)出xmlHttpRequest請求，我們可以繼續(xù)使用ajax進行請求訪問)
本文中我們使用第三種方式來解決在Springboot項目中的跨域問題。前端發(fā)出Ajax請求訪問Springboot（如在http://127.0.0.1:8086web項目中訪問http://127.0.0.1:8866）服務時，Ajax跨域請求報錯如下：
$.ajax({
????????????url?:?"http://127.0.0.1:8866/index",
????????????type?:?"GET",
????????????dataType?:?"text",
????????????success?:?function(msg)?{
????????????????$("#box").html(msg);
????????????????alert(msg);
????????????}
????????});
Access to XMLHttpRequest at 'http://127.0.0.1:8866/' from origin 'http://127.0.0.1:8086' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在http://127.0.0.1:8866這個服務中，我們有三種解決方式：
2.1注解方式
在需要跨域的Controller層的類或方法上加上注解：@CrossOrigin。這樣就可以指定該controller中所有方法或某個方法處理所有或只來自http://127.0.0.1:8086中的請求。
@Controller
@CrossOrigin//@CrossOrigin(origins?=?"http://127.0.0.1:8086",?maxAge?=?3600)
public?class?ApiController?{
????//@CrossOrigin
????@GetMapping(value?=?"/index")
????public?String?index(HttpServletRequest?request)?{
????????request.getSession().setMaxInactiveInterval(60*30);
????????return?"index";
????}
}
2.2 過濾器方式
修改返回請求頭信息：
@Component
public?class?CorsFilter?implements?Filter?{
????private?static?final?Logger?logger?=?LoggerFactory.getLogger(CorsFilter.class);
????@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,?HEAD");
????????response.setHeader("Access-Control-Max-Age",?"3600");
????????response.setHeader("Access-Control-Allow-Headers",
????????????????"access-control-allow-origin,?authority,?content-type,?version-info,?X-Requested-With");
????????chain.doFilter(req,?res);
????}
????@Override
????public?void?destroy()?{
????}
}
2.3 繼承WebMvcConfigurerAdapter，重寫addCorsMappings方法：
@Component
public?class?WebMvcConfig?extends?WebMvcConfigurerAdapter?{
????@Override
????public?void?addCorsMappings(CorsRegistry?registry)?{
????????registry.addMapping("/**")
????????.allowCredentials(true)
????????.allowedOrigins("*")
????????.allowedMethods("POST",?"GET",?"PUT",?"OPTIONS",?"DELETE")
????????.maxAge(3600)?
????????.allowedHeaders("*");
????}
}
喜歡就三連呀
關(guān)注 Stephen，一起學習，一起成長。