這篇文章不華麗，但比較實(shí)用，能解決不少大家實(shí)際業(yè)務(wù)中的問(wèn)題。大家可以收藏起來(lái)，以備用時(shí)之需！

1.同源策略　

1.1 含義

　　ajax出現(xiàn)請(qǐng)求跨域錯(cuò)誤問(wèn)題，主要原因就是因?yàn)闉g覽器的“同源策略”；1995年，同源政策由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實(shí)行這個(gè)政策。

最初，它的含義是指，A網(wǎng)頁(yè)設(shè)置的 Cookie，B網(wǎng)頁(yè)不能打開(kāi)，除非這兩個(gè)網(wǎng)頁(yè)"同源"。所謂"同源"指的是"三個(gè)相同"。

• 協(xié)議相同

• 域名相同

• 端口相同

　　舉例來(lái)說(shuō)，http://www.example.com/dir/page.html這個(gè)網(wǎng)址，協(xié)議是http://，域名是www.example.com，端口是80(默認(rèn)端口可以省略)。它的同源情況如下：

• 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，會(huì)發(fā)生什么？很顯然，如果 Cookie 包含隱私(比如存款總額)，這些信息就會(huì)泄漏。更可怕的是，Cookie 往往用來(lái)保存用戶的登錄狀態(tài)，如果用戶沒(méi)有退出登錄，其他網(wǎng)站就可以冒充用戶，為所欲為。因?yàn)闉g覽器同時(shí)還規(guī)定，提交表單不受同源政策的限制。

　　由此可見(jiàn)，"同源策略"是必需的，否則 Cookie 可以共享，互聯(lián)網(wǎng)就毫無(wú)安全可言了。

1.3 限制范圍

　　隨著互聯(lián)網(wǎng)的發(fā)展，"同源政策"越來(lái)越嚴(yán)格。目前，如果非同源，共有三種行為受到限制。

(1) Cookie、LocalStorage 和 IndexDB 無(wú)法讀取。

(2) DOM 無(wú)法獲得。

(3) AJAX 請(qǐng)求不能發(fā)送。

2.解決Ajax請(qǐng)求不能發(fā)送的問(wèn)題

　　本文只關(guān)注Ajax請(qǐng)求跨域問(wèn)題，想了解更多可以參考：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html　

　　同源政策規(guī)定，AJAX請(qǐng)求只能發(fā)給同源的網(wǎng)址，否則就報(bào)錯(cuò)。

　　除了架設(shè)服務(wù)器代理(瀏覽器請(qǐng)求同源服務(wù)器，再由后者請(qǐng)求外部服務(wù))，有三種方法規(guī)避這個(gè)限制。

• JSONP

• WebSocket

• CORS：(H5中的新特性：Cross-Origin Resource Sharing(跨域資源共享)。通過(guò)它，我們的開(kāi)發(fā)者(主要指后端開(kāi)發(fā)者)可以決定資源是否能被跨域訪問(wèn)。cors是一個(gè)w3c標(biāo)準(zhǔn)，它允許瀏覽器(目前ie8以下還不能被支持)像我們不同源的服務(wù)器發(fā)出xmlHttpRequest請(qǐng)求，我們可以繼續(xù)使用ajax進(jìn)行請(qǐng)求訪問(wèn))

　　本文中我們使用第三種方式來(lái)解決在Springboot項(xiàng)目中的跨域問(wèn)題。前端發(fā)出Ajax請(qǐng)求訪問(wèn)Springboot(如在http://127.0.0.1:8086web項(xiàng)目中訪問(wèn)http://127.0.0.1:8866)服務(wù)時(shí)，Ajax跨域請(qǐng)求報(bào)錯(cuò)如下：

$.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這個(gè)服務(wù)中，我們有三種解決方式：

2.1注解方式

　　在需要跨域的Controller層的類或方法上加上注解：@CrossOrigin。這樣就可以指定該controller中所有方法或某個(gè)方法處理所有或只來(lái)自http://127.0.0.1:8086中的請(qǐng)求。

@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 過(guò)濾器方式

　　修改返回請(qǐng)求頭信息：

@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，重寫(xiě)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("*");
????}
}

總結(jié)

以上是生活随笔為你收集整理的$.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。