前端和后端解決跨域問題的方法詳細講解
目前很多java web開發(fā)都是采用前后端分離框架進行開發(fā),相比于單體項目容易產(chǎn)生跨域問題。
一、跨域問題CORS
1.什么是跨域問題?
后端接收到請求并返回結(jié)果了,瀏覽器把這個響應(yīng)攔截了。
2.跨域問題是怎么產(chǎn)生的?
瀏覽器基于同源策略,如果請求的網(wǎng)頁和當前的服務(wù)不是同源的,并且發(fā)送的是XHR(XMLHttpRequest)請求,就會產(chǎn)生跨域問題。
同源策略:url中的協(xié)議、域名、端口號任意一個不同就不同源。注意兩個不同的域名指向同一個主機ip也叫不同源。
3.為什么要有同源策略?
CSRF攻擊:借助本地瀏覽器緩存的cookie信息,以當前登陸者的身份模擬發(fā)送請求,完成攻擊者期待的操作。當攻擊者拿到管理員的信息時可能對整個web程序造成重大打擊。
csrf防御:
- 規(guī)范使用各個請求方法,比如get請求只能檢索信息,不能修改信息。
- 當用戶訪問站點時生成一個隨機數(shù),并設(shè)置成用戶發(fā)送請求時的cookie。用戶提交表單時,要攜帶隨機數(shù)。當csrf攻擊者發(fā)送請求時,由于沒有這個隨機數(shù),所以請求失敗。
- 在非get請求中增加token并使用攔截器校驗。
- HTTP頭中有一個Referer字段,這個字段用以標明請求來源于哪個地址,在訪問敏感數(shù)據(jù)時,先檢查referer字段,查看請求來源于哪個地址。如果是本頁面的url就可以訪問,如果是別的網(wǎng)頁的url就禁止訪問。
- 自定義屬性加到請求頭。通過 XMLHttpRequest 這個類,一次性給所有該類請求加上 csrftoken 這個 HTTP 頭屬性。
- 客戶端中RequestRodeo 工具通過在客戶和服務(wù)器之間充當代理來防止CSRF攻擊
- 客戶端下載某些插件,對于攔截的請求用戶可以自己設(shè)置白名單。
二、解決方法
前端解決方式
1.JSONP方案:(只能解決get請求不能解決post請求)
不受同源策略影響的標簽:img、script、link 、iframe
通過在前端動態(tài)創(chuàng)建script標簽,指定跨域資源的URL,服務(wù)器返回的是一段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的替換成對應(yīng)字符 // /* 重寫路徑,當我們在瀏覽器中看到請求的地址為:http://localhost:8080/api/core/getData/userInfo 時 // 實際上訪問的地址是:http://localhost:8088/spring/core/getData/userInfo,因為重寫了 /api // */ '^/api': '' //當你的接口中沒有/api字眼時,采用這種,直接替換成空即可 // '^/api': '/api' //當你的接口中剛好有/api 時,采用這種方式 } } } } }
3.Nginx代理
正向代理:順著請求方向代理,由用戶配置,為用戶代理服務(wù)。拿到要訪問的資源。
反向代理:充當響應(yīng)服務(wù)器,對目標服務(wù)器提供了請求轉(zhuǎn)發(fā)的功能。
nginx使用的是反向代理:瀏覽器訪問A服務(wù)器,A服務(wù)器再將請求發(fā)送到B瀏覽器,拿到內(nèi)容返回給瀏覽器。
下載negix,完成配置
服務(wù)器監(jiān)聽80端口,請求帶著“/api”就代理到指定的服務(wù)器,也可以配置重寫url。
上面的場景:前端發(fā)送一個api/xxx請求,negix代理對請求做處理。將這個請求代理到后端服務(wù)器,并重寫了請求的url。
ssm項目后端表現(xiàn)層解決方案
1.在響應(yīng)頭中添加屬性
在controller代碼中寫下面這行代碼。
response.addHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");
springboot項目中,跨域問題后端怎么解決?
CORS:跨域同源共享。在響應(yīng)頭中設(shè)置一些配置。access-control-allow-origin屬性設(shè)置
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.使用代理工具。
到此這篇關(guān)于前端和后端解決跨域問題的文章就介紹到這了,更多相關(guān)前端和后端解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中touchstart事件與click事件沖突的解決方法
這篇文章主要給大家介紹了關(guān)于JS中touchstart事件與click事件沖突的解決方法,文中通過示例代碼將解決的方法介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03uni-app開發(fā)微信小程序遇到的部分踩坑實戰(zhàn)
最近在用uni-app開發(fā)微信小程序,這里將開發(fā)中遇到的坑和問題記錄一下,所以下面這篇文章主要給大家介紹了關(guān)于uni-app開發(fā)微信小程序遇到的部分踩坑,需要的朋友可以參考下2023-02-02javascript 二維數(shù)組的實現(xiàn)與應(yīng)用
javascript沒有二維數(shù)組.所有自定義了一個數(shù)組類,下面是實例代碼,需要的朋友可以參考下。2010-03-03