跨域

跨域是前端開發常見的問題，跨域的出現是為了安全，防止XSS、CSFR等攻擊。

CSRF攻擊:Cross-site request forgery,跨站請求偽裝。
簡單解釋：當你登陸了銀行網站，同時打開了網站A，網站A通過讀取保存在本地的銀行網站信息，發送請求到銀行服務器，損害你的利益。網站A的動作就叫CSRF攻擊。
XSS攻擊:Cross-Site Scripting,跨站執行腳本,非目標用戶使瀏覽器執行了不被預期的腳本。閑聊一句，看字面簡寫應該叫CSS攻擊才對吧。
簡單解釋：當你登陸了銀行網站，同時打開了網站A，網站A通過某種方法讓銀行網站執行某段腳本，損害你的利益。網站A的動作就叫XSS攻擊。

跨域問題完全是因為瀏覽器這個應用程序內的規則，如果你自己寫了WINFORM的WEB控件寫一個讀取網頁的應用程序，不遵循同源策略,那就不會有跨域問題。但也沒有防XSS、CSFR等攻擊的能力。

同源策略

簡單的講就是瀏覽器中一個網站不可獲取其他網站的資源的規則。

同源策略規定：
所指的同源是域名+協議+端口。
在一個網站的源地址是http://www.glsa.com.cn:8080/，則訪問的資源URL在最后一個/前的所有內容不可變，否則定義為跨域。
跨域后，不可訪問
1）Cookie、LocalStorage 和 IndexDB 無法讀取
2）DOM 和 JS 對象無法獲取
3）網絡請求不可發送

前后端分離的情況下，如果就是想訪問兩個站點的數據，咋辦？介紹一種通用方式CORS
CORS:Cross Origin Resourse-Sharing，跨域資源共享，前后端相協調解決跨域問題，是一種在同源策略下可以跨域的驗證機制。

驗證方式

• 簡單方式：

前端發送網絡請求時：

網絡請求是GET,POST,HEAD（跟GET方法相同，只不過服務器響應時不會返回消息體）請求。

請求頭中的Content-Type請求頭的值是application/x-www-form-urlencoded、multipart/form-data、text/plain

瀏覽器會直接發送附合簡單方式跨域請求，并在header中攜帶Origin，值為請求網頁的源地址。
后端通過Access-Control-Allow-Origin和Access-Control-Allow-Methods響應頭，驗證origin是否附合條件，如果附合，直接返回數據。
??

axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'; axios.get('http://serverurl/api').then((res) => {console.log(res); })

• 預先請求

前端發送網絡請求時：

網絡請求不是GET,POST,HEAD請求。

請求頭中的Content-Type請求頭的值不是application/x-www-form-urlencoded、multipart/form-data、text/plain

瀏覽器會先發送一個預先驗證請求(Preflighted requests)，請求的header中包括了帶Origin(網頁的源地址),Access-Control-Request-Method(網絡請求方法)、Access-Control-Request-Headers(head中的Content-Type值)。
后端通過已配置的Access-Control-Allow-Origin和Access-Control-Allow-Methods和Access-Control-Allow-Headers相對應，判斷是否附合條件。驗證通過，瀏覽器才會發送真正的跨域請求。

測試代碼：

axios.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8'; axios.put('http://serverurl/api').then((res) => {console.log(res);})

• 帶認證的請求

默認情況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)。通過將withCredentials屬性設置為true，可以指定某個請求應該發送憑據。

xhr.withCredentials = true;

如果服務器接收帶憑據的請求，會用下面的HTTP頭部來響應。
Access-Control-Allow-Credentials: true
服務器還可以在Preflight響應中發送這個HTTP頭部，表示允許源發送帶憑據的請求。?? ?

注意，當withCredentials屬性設置為true，需要response header（服務器端配置）中的'Access-Control-Allow-Origin'為一個確定的域名，而不能使用'*'這樣的通配符。

Header?

Request header

• Origin

????????Origin頭在跨域請求或預先請求中，標明發起跨域請求的源域名。

• Access-Control-Request-Method

????????Access-Control-Request-Method頭用于表明跨域請求使用的實際HTTP方法

• Access-Control-Request-Headers

????????Access-Control-Request-Headers用于在預先請求時，告知服務器要發起的跨域請求中會攜帶的請求頭信息

Response header

• Access-Control-Allow-Origin
• Access-Control-Allow-Origin頭中攜帶了服務器端驗證后的允許的跨域請求域名，可以是一個具體的域名或是一個*（表示任意域名）。簡單請求時，瀏覽器會根據此響應頭的內容決定是否給腳本返回相應內容，預先驗證請求時，瀏覽器會根據此響應頭決定是否發送實際的跨域請求。
• Access-Control-Expose-Headers
• Access-Control-Expose-Headers頭用于允許返回給跨域請求的響應頭列表，在列表中的響應頭的內容，才可以被瀏覽器訪問。
• Access-Control-Max-Age
• Access-Control-Max-Age用于告知瀏覽器可以將預先檢查請求返回結果緩存的時間，在緩存有效期內，瀏覽器會使用緩存的預先檢查結果判斷是否發送跨域請求。
• Access-Control-Allow-Credentials
• Access-Control-Allow-Credentials用于告知瀏覽器當withCredentials屬性設置為true時，是否可以顯示跨域請求返回的內容。簡單請求時，瀏覽器會根據此響應頭決定是否顯示響應的內容。預先驗證請求時，瀏覽器會根據此響應頭決定在發送實際跨域請求時，是否攜帶認證信息。
• Access-Control-Allow-Methods
• Access-Control-Allow-Methods用于告知瀏覽器可以在實際發送跨域請求時，可以支持的請求方法，可以是一個具體的方法列表或是一個*（表示任意方法）。簡單請求時，瀏覽器會根據此響應頭的內容決定是否給腳本返回相應內容，預先驗證請求時，瀏覽器會根據此響應頭決定是否發送實際的跨域請求。
• Access-Control-Allow-Headers
• Access-Control-Allow-Headers用于告知瀏覽器可以在實際發送跨域請求時，可以支持的請求頭，可以是一個具體的請求頭列表或是一個*（表示任意請求頭）。簡單請求時，瀏覽器會根據此響應頭的內容決定是否給腳本返回相應內容，預先驗證請求時，瀏覽器會根據此響應頭決定是否發送實際的跨域請求。?

Springboot 設置后端跨域方式

1:在controller上直解加注解@CrossOrigin,可使用在方法或者類上

@CrossOrigin @RequestController public ApiController{@RequestMapping(value="/api")public String api() {return "test";} }

2:注入Bean

@Configuration public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")?? ?// 允許跨域訪問的路徑//.allowedOrigins("*")?? ?// 允許跨域訪問的源.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")?? ?// 允許請求方法.maxAge(168000)?? ?// 預檢間隔時間.allowedHeaders("*") ?// 允許頭部設置.allowCredentials(true);?? ?// 是否發送cookie} }

3:使用filter

@Configuration public class MyConfiguration {@Beanpublic FilterRegistrationBean corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("http://domain.com");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(config));bean.setOrder(0);return bean;} }

nigix配置跨域

if ($request_method = 'OPTIONS') {?add_header 'Access-Control-Allow-Origin' 'http://server.url';?add_header 'Access-Control-Allow-Credentials' 'true';?add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';?add_header 'Access-Control-Allow-Headers' '*';?}if ($request_method = 'POST') {?add_header 'Access-Control-Allow-Origin' 'https://server.url';?add_header 'Access-Control-Allow-Credentials' 'false';?add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';?add_header 'Access-Control-Allow-Headers' '*';?}?if ($request_method = 'GET') {?add_header 'Access-Control-Allow-Origin' '*';?add_header 'Access-Control-Allow-Credentials' ' false';?add_header 'Access-Control-Allow-Methods' '*';?add_header 'Access-Control-Allow-Headers' '*';?}

當通過nigix反向代理->gateway->spring項目的情況，跨域不可重復設置，如果其中兩個項目配置了跨域，則跨域失校。

總結

以上是生活随笔為你收集整理的springboot-vue跨域详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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