javascript
cors 前后端分离跨域问题_SpringBoot 实现前后端分离的跨域访问（CORS）
序言：跨域資源共享向來都是熱門的需求，使用CORS可以幫助我們快速實現跨域訪問，只需在服務端進行授權即可，無需在前端添加額外設置，比傳統的JSONP跨域更安全和便捷。
一、基本介紹
簡單來說，CORS是一種訪問機制，英文全稱是Cross-Origin Resource Sharing，即我們常說的跨域資源共享，通過在服務器端設置響應頭，把發起跨域的原始域名添加到Access-Control-Allow-Origin 即可。
1. CORS工作原理
CORS實現跨域訪問并不是一蹴而就的，需要借助瀏覽器的支持，從原理題圖我們可以清楚看到，簡單的請求(通常指GET/POST/HEAD方式，并沒有去增加額外的請求頭信息)直接創建了跨域請求的XHR對象，而復雜的請求則要求先發送一個"預檢"請求，待服務器批準后才能真正發起跨域訪問請求。
來自維基百科
根據官方文檔W3C規范-CORS 的描述，目前CORS使用了如下頭部信息：
2. Request Headers(請求頭)
溫馨提示：Request Headers 無需人為干預，因為瀏覽器會自動識別跨域請求并添加對應的請求頭。
Origin 表示發起跨域請求的原始域。
Access-Control-Request-Method 表示發起跨域請求的方式，例如GET/POST。
Access-Control-Request-Headers表示發起跨域請求的額外頭信息。
3. Response headers(響應頭 )
溫馨提示：Response Headers 需要人為干預，通過設置響應頭以幫助服務器資源進行跨域授權，例如允許哪些原始域進行跨域請求，是否允許響應信息攜帶Cookie等認證信息。
Access-Control-Allow-Origin 表示允許哪些原始域進行跨域訪問。
Access-Control-Allow-Credentials表示是否允許客戶端獲取用戶憑據。
使用場景：例如現在需要登錄系統后才能發起跨域請求，并且要附帶Cookie信息給服務器。則必須具備兩個條件：1. 瀏覽器端：發送AJAX請求前需設置通信對象XHR的withCredentials 屬性為true。 2.服務器端：設置Access-Control-Allow-Credentials為true。兩個條件缺一不可，否則即使服務器同意發送Cookie，瀏覽器也無法獲取。正確姿勢如下：
$.ajax({
url: 'localhost:8080',
xhrFields: {
withCredentials: true //表示發起跨域訪問并要求攜帶Cookie等認證信息
},
success: function (r) {
console.log(r)
}
});
有好奇的小伙伴可能會問為什么在W3C手冊中找不到跨域屬性xhrFields的描述，因為該屬性并不是通信對象XHR的默認屬性，而是自定義屬性，所以在jQuery Ajax 參考手冊 中并沒有明確注明，但我們可以在jQuery源碼中找到這段蛛絲馬跡，那么整體思路就很清晰了。
// Cross domain only allowed if supported through XMLHttpRequest
if ( support.cors || xhrSupported && !options.crossDomain ) {
return {
send: function( headers, complete ) {
var i,
xhr = options.xhr();
xhr.open(
options.type,
options.url,
options.async,
options.username,
options.password
);
// Apply custom fields if provided
if ( options.xhrFields ) {
for ( i in options.xhrFields ) {
xhr[ i ] = options.xhrFields[ i ];
}
}
...
}
Access-Control-Allow-Methods 表示允許哪些跨域請求的提交方式。(例如GET/POST)
Access-Control-Allow-Headers 表示跨域請求的頭部的允許范圍。
Access-Control-Expose-Headers 表示允許暴露哪些頭部信息給客戶端。
使用說明：基于安全考慮，如果沒有設置額外的暴露，跨域的通信對象XMLHttpRequest只能獲取標準的頭部信息。
Access-Control-Max-Age 表示預檢請求 [Preflight Request] 的最大緩存時間。
二、CORS實現跨域訪問
授權方式
方式1：返回新的CorsFilter
方式2：重寫WebMvcConfigurer
方式3：使用注解(@CrossOrigin)
方式4：手工設置響應頭(HttpServletResponse )
注：CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持，對應SpringBoot 1.3 版本以上都支持這些CORS特性。不過，使用SpringMVC4.2 以下版本的小伙伴也不用慌，直接使用方式4通過手工添加響應頭來授權CORS跨域訪問也是可以的。附：在SpringBoot 1.2.8 + SpringMVC 4.1.9 親測成功。
注：方式1和方式2屬于全局CORS配置，方式3和方式4屬于局部CORS配置。如果使用了局部跨域是會覆蓋全局跨域的規則，所以可以通過@CrossOrigin注解來進行細粒度更高的跨域資源控制。
1. 返回新的CorsFilter(全局跨域)
在任意配置類，返回一個新的CorsFilter Bean，并添加映射路徑和具體的CORS配置信息。
package com.hehe.yyweb.config;
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//放行哪些原始域
config.addAllowedOrigin("*");
//是否發送Cookie信息
config.setAllowCredentials(true);
//放行哪些原始域(請求方式)
config.addAllowedMethod("*");
//放行哪些原始域(頭部信息)
config.addAllowedHeader("*");
//暴露哪些頭部信息(因為跨域訪問默認不能獲取全部頭部信息)
config.addExposedHeader("*");
//2.添加映射路徑
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
2. 重寫WebMvcConfigurer(全局跨域)
在任意配置類，返回一個新的WebMvcConfigurer Bean，并重寫其提供的跨域請求處理的接口，目的是添加映射路徑和具體的CORS配置信息。
package com.hehe.yyweb.config;
@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
//重寫父類提供的跨域請求處理的接口
public void addCorsMappings(CorsRegistry registry) {
//添加映射路徑
registry.addMapping("/**")
//放行哪些原始域
.allowedOrigins("*")
//是否發送Cookie信息
.allowCredentials(true)
//放行哪些原始域(請求方式)
.allowedMethods("GET","POST", "PUT", "DELETE")
//放行哪些原始域(頭部信息)
.allowedHeaders("*")
//暴露哪些頭部信息(因為跨域訪問默認不能獲取全部頭部信息)
.exposedHeaders("Header1", "Header2");
}
};
}
}
3. 使用注解(局部跨域)
在方法上(@RequestMapping)使用注解 @CrossOrigin ：
@RequestMapping("/hello")
@ResponseBody
@CrossOrigin("http://localhost:8080")
public String index( ){
return "Hello World";
}
或者在控制器(@Controller)上使用注解 @CrossOrigin ：
@Controller
@CrossOrigin(origins = "http://xx-domain.com", maxAge = 3600)
public class AccountController {
@RequestMapping("/hello")
@ResponseBody
public String index( ){
return "Hello World";
}
}
4. 手工設置響應頭(局部跨域 )
使用HttpServletResponse對象添加響應頭(Access-Control-Allow-Origin)來授權原始域，這里Origin的值也可以設置為"*" ，表示全部放行。
@RequestMapping("/hello")
@ResponseBody
public String index(HttpServletResponse response){
response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
return "Hello World";
}
三、測試跨域訪問
首先使用Spring Initializr 快速構建一個Maven工程，什么都不用改，在static目錄下，添加一個頁面：index.html 來模擬跨域訪問。目標地址: http://localhost:8090/hello
Page Index前臺系統
$.ajax({
url: 'http://localhost:8090/hello',
type: "POST",
xhrFields: {
withCredentials: true //允許跨域認證
},
success: function (data) {
$("#info").html("跨域訪問成功:"+data);
},
error: function (data) {
$("#info").html("跨域失敗!!");
}
})
然后創建另一個工程，在Root Package添加Config目錄并創建配置類來開啟全局CORS。
package com.hehe.yyweb.config;
@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
};
}
}
接著，簡單編寫一個Rest接口 ，并指定應用端口為8090。
package com.hehe.yyweb;
@SpringBootApplication
@RestController
public class YyWebApplication {
@Bean
public TomcatServletWebServerFactory tomcat() {
TomcatServletWebServerFactory tomcatFactory = new TomcatServletWebServerFactory();
tomcatFactory.setPort(8090); //默認啟動8090端口
return tomcatFactory;
}
@RequestMapping("/hello")
public String index() {
return "Hello World";
}
public static void main(String[] args) {
SpringApplication.run(YyWebApplication.class, args);
}
}
最后分別啟動兩個應用，然后在瀏覽器訪問：http://localhost:8080/index.html ，可以正常接收JSON數據，說明跨域訪問成功！！
嘗試把全局CORS關閉，或者沒有單獨在方法或類上授權跨域，再次訪問：http://localhost:8080/index.html 時會看到跨域請求失敗！！
四、源碼和文檔
五、版權聲明
總結
以上是生活随笔為你收集整理的cors 前后端分离跨域问题_SpringBoot 实现前后端分离的跨域访问（CORS）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python百度翻译接口_python3
- 下一篇： eclipse启动提示java,Ecli