欧美成人色情网,91人妻无码精品蜜桃,亚洲视频久久久,操北条麻妃,欧美+国产+无码+麻豆,东方av在,伊大香蕉在线,手机自拍偷拍狼友视视频

大家好，我是路人，這是SpringMVC系列第31篇。

今天又給大家?guī)砹艘粋€很重要的知識點：SpringMVC中如何處理跨域問題，本文的內(nèi)容同樣適合于SpringBoot

1、跨域訪問報錯

當(dāng)一個請求url的協(xié)議、域名、端口三者之間任意一個與當(dāng)前頁面url不同即為跨域。

出于安全原因，瀏覽器禁止Ajax調(diào)用駐留在當(dāng)前原點之外的資源，比如從a.com發(fā)送一個ajax請求到b.com，則瀏覽器控制臺會報跨域訪問錯誤。

如下圖，從http://localhost:63342/站點頁面中向ttp://localhost:8080/chat21/cors/test2發(fā)送一個ajax請求，則出現(xiàn)了紅色的錯誤信息，錯誤中包含了Access-Controll-Allow-Origin這樣字樣的錯誤，以后看到這個的時候，大家就要一眼看出來這是跨域問題。

2、同源定義

同源策略是瀏覽器的一個重要的安全策略，它用于限制一個源的文檔或其加載的腳本如何與另外一個源進(jìn)行交互，它能夠隔絕惡意文檔，減少被攻擊的媒介。

如果兩個URL的協(xié)議、主機(jī)名和端口號都是相同的，那么這兩個URL就是同源的，否則不同源，不同源的訪問就會出現(xiàn)跨域問題，就會出現(xiàn)上面的錯誤。

下表給出了與 URL http://store.company.com/dir/page.html 的源進(jìn)行對比的示例:

URL	結(jié)果	原因
http://store.company.com/dir2/other.html	同源	只有路徑不同
https://store.company.com/secure.html	非同源	協(xié)議不同
http://store.company.com:81/dir/etc.html	非同源	端口號不同
http://news.company.com/dir/other.html	非同源	主機(jī)名不同

也就是說當(dāng)在http://store.company.com/dir/page.html這個網(wǎng)站中向https://store.company.com、http://store.company.com:81和http://news.company.com三個地址發(fā)起AXJX請求都會失敗并且會報跨域的錯誤。這就是瀏覽器的同源策略，只能訪問同源的數(shù)據(jù)。

3、跨域問題如何解決？

跨域問題需要使用CORS來解決，請求端和后端接口需要遵循CORS規(guī)則來通信，便可解決跨域訪問的問題。

CORS全稱Cross-Origin Resource Sharing, 即跨域資源共享，是一個由一系列HTTP頭組成的系統(tǒng)，這些HTTP頭決定瀏覽器是否阻止前端javascript代碼獲取跨域請求的響應(yīng)。為什么需要CORS ？這是因為瀏覽器存在同源安全策略，當(dāng)我們在當(dāng)前域請求另外一個域的資源時，瀏覽器默認(rèn)會阻止腳本讀取它的響應(yīng)，這時CORS就有了用武之地。

跨源資源共享（CORS）是由大多數(shù)瀏覽器實現(xiàn)的W3C規(guī)范，允許您靈活地指定什么樣的跨域請求被授權(quán)，而不是使用一些不太安全和不太強(qiáng)大的策略，如IFRAME或JSONP等。

4、CORS原理

CORS的原理：簡單點說，就是在請求頭或響應(yīng)頭中添加了一些配置，通過這些配置來便可輕松解決跨域問題。

想詳細(xì)了解CORS原理的，建議先閱讀下面2篇文章，然后再繼續(xù)向下看，否則，最后你知道SpringMVC是如何解決的，但是不知道本質(zhì)的原理是什么。

CORS通信：http://itsoku.com/article/197
瀏覽器安全策略 & CORS：http://itsoku.com/article/198

5、SpringMVC中如何解決跨域問題？

SpringMVC內(nèi)部提供了跨域問題的解決方案，只需要做一些簡單的配置，而接口基本上不用做任何修改，便可解決跨域問題。

SpringMVC解決跨域問題的原理也就是SpringMVC遵循了CORS通信的規(guī)則來解決了跨域的問題，在響應(yīng)頭中添加了一些CORS需要的信息。

SpringMVC中提供了3種方案來解決跨域問題，下面一起來了解下。

6、方案1：方法或者類上標(biāo)注@CrossOrigin注解

接口方法上標(biāo)注org.springframework.web.bind.annotation.CrossOrigin注解，如下test1接口上標(biāo)注了@CrossOrigin注解，這個接口就支持跨域訪問，@CrossOrigin注解中含有更詳細(xì)的配置，這里就不細(xì)說了
也可以在類上標(biāo)注@CrossOrigin注解，那么這個類中所有接口會支持跨域訪問
也可同時在類和方法上標(biāo)注@CrossOrigin注解，最后方法上的跨域訪問會取合并后的配置

@RestController
public?class?CorsController?{

????@RequestMapping("/cors/test1")
????@CrossOrigin
????public?List?test1()?{
????????List?result?=?Arrays.asList("www.itsoku.com",
????????????????"Spring高手系列",
????????????????"SpringMVC系列",
????????????????"MySQL系列",
????????????????"高并發(fā)系列");
????????return?result;
????}

}

7、方案2：全局配置的方式

除了細(xì)粒度、基于注釋的配置之外，您還可能需要定義一些全局CORS配置，這類似于使用篩選器，但可以聲明為Spring MVC并結(jié)合細(xì)粒度@CrossOrigin配置。默認(rèn)情況下，所有origins and GET, HEAD and POST methods是允許的。

@EnableWebMvc
@Configuration
public?class?MvcConfig?implements?WebMvcConfigurer?{

????@Override
????public?void?addCorsMappings(CorsRegistry?registry)?{

????????//每次調(diào)用registry.addMappin可以添加一個跨域配置，需要多個配置可以多次調(diào)用registry.addMapping
????????registry.addMapping("/**")
????????????????.allowedOrigins("*")?//放行哪些原始域
????????????????.allowedMethods("PUT",?"DELETE"，"POST",?"GET")?//放行哪些請求方式
????????????????.allowedHeaders("header1",?"header2",?"header3")?//放行哪些原始請求頭部信息
????????????????.exposedHeaders("header1",?"header2")?//暴露哪些頭部信息
????????????????.allowCredentials(false)?//是否發(fā)送?Cookie
????????????????.maxAge(3600);

????????//?Add?more?mappings...
????}
}

8、方案3：攔截器的方式CorsFilter

//處理跨域的Filter
//1.?添加?CORS配置信息
CorsConfiguration?config?=?new?CorsConfiguration();
//放行哪些原始域
config.addAllowedOrigin("*");
//是否發(fā)送?Cookie
config.setAllowCredentials(false);
//放行哪些請求方式
config.addAllowedMethod("*");
//放行哪些原始請求頭部信息
config.addAllowedHeader("*");
//暴露哪些頭部信息
config.addExposedHeader("*");
//2.?添加映射路徑
UrlBasedCorsConfigurationSource?corsConfigurationSource?=?new?UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**",config);

9、案例代碼

9.1、案例完整代碼

git地址:https://gitee.com/javacode2018/springmvc-series

9.2、接口代碼：CorsController

CorsController中有2個接口，第一個接口上標(biāo)注了@CrossOrigin注解，可以解決跨域訪問的問題，而第二個方法沒有標(biāo)注。

@RestController
public?class?CorsController?{

????@RequestMapping("/cors/test1")
????@CrossOrigin
????public?List?test1()?{
????????List?result?=?Arrays.asList("www.itsoku.com",
????????????????"Spring高手系列",
????????????????"SpringMVC系列",
????????????????"MySQL系列",
????????????????"高并發(fā)系列");
????????return?result;
????}

????@RequestMapping("/cors/test2")
????public?List?test2()?{
????????List?result?=?Arrays.asList("www.itsoku.com",
????????????????"Spring高手系列",
????????????????"SpringMVC系列",
????????????????"MySQL系列",
????????????????"高并發(fā)系列");
????????return?result;
????}

}

9.3、靜態(tài)頁面：cors.html

靜態(tài)頁面cors.html中添加了2個按鈕，點擊2個按鈕的時候，分別以ajax跨域的方式訪問上面2個接口，第1個按鈕訪問第一個接口，第2個按鈕訪問第二個接口，然后在瀏覽器控制臺查看效果。

html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>corstitle>
????<script?type="text/javascript"?src="jquery-3.6.0.min.js">script>
????<script?type="text/javascript">
????????$(function?()?{
????????????$("#cors-btn1").click(function?()?{
????????????????$.ajax({
????????????????????url:?"http://localhost:8080/chat21/cors/test1",
????????????????????success:?function?(data)?{
????????????????????????console.log(JSON.stringify(data));
????????????????????}
????????????????});
????????????});
????????????$("#cors-btn2").click(function?()?{
????????????????$.ajax({
????????????????????url:?"http://localhost:8080/chat21/cors/test2",
????????????????????success:?function?(data)?{
????????????????????????console.log(JSON.stringify(data));
????????????????????}
????????????????});
????????????});
????????})
????script>
head>
<body>
<button?id="cors-btn1">跨域測試test1button>
<button?id="cors-btn2">跨域測試test2button>
body>
html>