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