這篇文章不華麗，但比較實用，能解決不少大家實際業務中的問題。大家可以收藏起來，以備用時之需！

1.同源策略　

1.1 含義

　　ajax出現請求跨域錯誤問題，主要原因就是因為瀏覽器的“同源策略”；1995年，同源政策由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實行這個政策。

最初，它的含義是指，A網頁設置的 Cookie，B網頁不能打開，除非這兩個網頁"同源"。所謂"同源"指的是"三個相同"。

• 協議相同

• 域名相同

• 端口相同

　　舉例來說，http://www.example.com/dir/page.html這個網址，協議是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 目的

　　同源策略的目的，是為了保證用戶信息的安全，防止惡意的網站竊取數據。

　　設想這樣一種情況：A網站是一家銀行，用戶登錄以后，又去瀏覽其他網站。如果其他網站可以讀取A網站的 Cookie，會發生什么？很顯然，如果 Cookie 包含隱私(比如存款總額)，這些信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態，如果用戶沒有退出登錄，其他網站就可以冒充用戶，為所欲為。因為瀏覽器同時還規定，提交表單不受同源政策的限制。

　　由此可見，"同源策略"是必需的，否則 Cookie 可以共享，互聯網就毫無安全可言了。

1.3 限制范圍

　　隨著互聯網的發展，"同源政策"越來越嚴格。目前，如果非同源，共有三種行為受到限制。

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

(2) DOM 無法獲得。

(3) AJAX 請求不能發送。

2.解決Ajax請求不能發送的問題

　　本文只關注Ajax請求跨域問題，想了解更多可以參考：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html　

　　同源政策規定，AJAX請求只能發給同源的網址，否則就報錯。

　　除了架設服務器代理(瀏覽器請求同源服務器，再由后者請求外部服務)，有三種方法規避這個限制。

• JSONP

• WebSocket

• CORS：(H5中的新特性：Cross-Origin Resource Sharing(跨域資源共享)。通過它，我們的開發者(主要指后端開發者)可以決定資源是否能被跨域訪問。cors是一個w3c標準，它允許瀏覽器(目前ie8以下還不能被支持)像我們不同源的服務器發出xmlHttpRequest請求，我們可以繼續使用ajax進行請求訪問)

　　本文中我們使用第三種方式來解決在Springboot項目中的跨域問題。前端發出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("*");
????}
}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。