前端和后端解決跨域問題的方法詳細講解
目前很多java web開發(fā)都是采用前后端分離框架進行開發(fā)，相比于單體項目容易產(chǎn)生跨域問題。
一、跨域問題CORS
1.什么是跨域問題？
后端接收到請求并返回結果了，瀏覽器把這個響應攔截了。
2.跨域問題是怎么產(chǎn)生的？
瀏覽器基于同源策略，如果請求的網(wǎng)頁和當前的服務不是同源的，并且發(fā)送的是XHR（XMLHttpRequest）請求，就會產(chǎn)生跨域問題。
同源策略：url中的協(xié)議、域名、端口號任意一個不同就不同源。注意兩個不同的域名指向同一個主機ip也叫不同源。
3.為什么要有同源策略？
CSRF攻擊：借助本地瀏覽器緩存的cookie信息，以當前登陸者的身份模擬發(fā)送請求，完成攻擊者期待的操作。當攻擊者拿到管理員的信息時可能對整個web程序造成重大打擊。
csrf防御：
- 規(guī)范使用各個請求方法，比如get請求只能檢索信息，不能修改信息。
- 當用戶訪問站點時生成一個隨機數(shù)，并設置成用戶發(fā)送請求時的cookie。用戶提交表單時，要攜帶隨機數(shù)。當csrf攻擊者發(fā)送請求時，由于沒有這個隨機數(shù)，所以請求失敗。
- 在非get請求中增加token并使用攔截器校驗。
- HTTP頭中有一個Referer字段，這個字段用以標明請求來源于哪個地址，在訪問敏感數(shù)據(jù)時，先檢查referer字段，查看請求來源于哪個地址。如果是本頁面的url就可以訪問，如果是別的網(wǎng)頁的url就禁止訪問。
- 自定義屬性加到請求頭。通過 XMLHttpRequest 這個類，一次性給所有該類請求加上 csrftoken 這個 HTTP 頭屬性。
- 客戶端中RequestRodeo 工具通過在客戶和服務器之間充當代理來防止CSRF攻擊
- 客戶端下載某些插件，對于攔截的請求用戶可以自己設置白名單。
二、解決方法
前端解決方式
1.JSONP方案：（只能解決get請求不能解決post請求）
不受同源策略影響的標簽：img、script、link 、iframe
通過在前端動態(tài)創(chuàng)建script標簽，指定跨域資源的URL，服務器返回的是一段JavaScript代碼，前端通過回調(diào)函數(shù)處理數(shù)據(jù)。
2.vue解決devServer配置
module.exports = {
devServer: {
proxy: {
'/api': { // 請求的代稱，寫在Axios里的BaseUrl
target: 'http://localhost:8088/spring', // 真實請求URl
ws: true,
changeOrigin: true, // 允許跨域
pathRewrite: { //替換，通配/api的替換成對應字符
// /* 重寫路徑，當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/core/getData/userInfo 時
// 實際上訪問的地址是：http://localhost:8088/spring/core/getData/userInfo,因為重寫了 /api
// */
'^/api': '' //當你的接口中沒有/api字眼時，采用這種，直接替換成空即可
// '^/api': '/api' //當你的接口中剛好有/api 時，采用這種方式
}
}
}
}
}
3.Nginx代理
正向代理：順著請求方向代理，由用戶配置，為用戶代理服務。拿到要訪問的資源。
反向代理：充當響應服務器，對目標服務器提供了請求轉發(fā)的功能。
nginx使用的是反向代理：瀏覽器訪問A服務器，A服務器再將請求發(fā)送到B瀏覽器，拿到內(nèi)容返回給瀏覽器。
下載negix，完成配置
服務器監(jiān)聽80端口，請求帶著“/api”就代理到指定的服務器，也可以配置重寫url。
上面的場景：前端發(fā)送一個api/xxx請求，negix代理對請求做處理。將這個請求代理到后端服務器，并重寫了請求的url。
ssm項目后端表現(xiàn)層解決方案
1.在響應頭中添加屬性
在controller代碼中寫下面這行代碼。
response.addHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");
springboot項目中，跨域問題后端怎么解決？
CORS：跨域同源共享。在響應頭中設置一些配置。access-control-allow-origin屬性設置
1.在目標方法上添加@CrossOrigin注解
2.添加cors的過濾器統(tǒng)一解決，不用每個方法都加注解
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter(){
CorsConfiguration corsConfiguration=new CorsConfiguration();
//允許那些域訪問
corsConfiguration.addAllowedOrigin("*");
//允許請求頭字段
corsConfiguration.addAllowedHeader("*");
//允許請求的方法
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
//添加映射路徑
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}3.實現(xiàn)WebMvcConfigurer接口，重寫addCorsMappings方法
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowCredentials(true) //是否允許攜帶cookie
.maxAge(3600) //有效時間
.allowedHeaders("*");
}
4.使用代理工具。
到此這篇關于前端和后端解決跨域問題的文章就介紹到這了,更多相關前端和后端解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript中值類型與引用類型說明，需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了原生javascript實現(xiàn)圖片彈窗交互效果的方法及的相關資料,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了前端接口報錯302的問題,并提供了多種解決方法和代碼案例,幫助開發(fā)者更好地應對這一常見問題,需要的朋友可以參考下2025-01-01
WebSocket最大特點就是服務器可以主動向客戶端推送信息,客戶端也可以主動向服務器發(fā)送信息,是真正的雙向平等對話,屬于服務器推送技術的一種,下面這篇文章主要給大家介紹了關于如何優(yōu)雅的使用WebSocket的相關資料,需要的朋友可以參考下2022-05-05
javascript利用canvas實現(xiàn)鼠標拖拽功能
這篇文章主要為大家詳細介紹了javascript利用canvas實現(xiàn)鼠標拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
作用域是JavaScript中一個重要的概念,它決定了變量和函數(shù)在代碼中的可訪問性和可見性,了解JavaScript的作用域對于編寫高效、可維護的代碼至關重要,本文將深入介紹JavaScript作用域相關的知識點,其中包括作用域類型,作用域鏈,變量提升以及閉包等2023-08-08
layui 點擊重置按鈕, select 并沒有被重置的解決方法
今天小編就為大家分享一篇layui 點擊重置按鈕, select 并沒有被重置的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了javascript封裝簡單實現(xiàn)方法,涉及javascript中方法與屬性的相關設置與使用技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
轉換json格式的日期為Javascript對象的函數(shù)
項目中碰到了用jQuery從后臺獲取的json格式的日期的字符串，需要將此字符串轉換成JavaScript的日期對象，記在此處，以備后用。2010-07-07