前後端分離項目解決前端跨域訪問問題
前後端分離開發,必須解決跨域問題!
跨域:對於 url 如 //localhost:8080
,請求協議、ip 地址、埠號,只要發送請求方和接收請求方的這三個數據中,只要有一個不同,就表示是跨域訪問!
AJAX 跨域訪問:用戶訪問 A 網站時所產生的對 B 網站的跨域訪問請求均提交到 A 網站的指定頁面
跨域問題,可以理解為瀏覽器的一種保護機制,不接收不被信任的請求。
如果前端和後端集中開發,比如單體項目中,他們的請求都是統一的,則不存在跨域問題!
跨域問題主要出現在前後端分離的項目中,前端和後端分離,請求方式不統一,此時必須解決跨域問題!
其他說明參考:
跨域,指的是瀏覽器不能執行其他網站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器施加的安全限制。
最簡單的說就是從當前域名的網站下不能請求非同源的地址。
所謂同源是指,域名,協議,埠均相同,只要有一個不同,就是跨域。
請特別注意:跨域問題是針對於瀏覽器的,因為需要解決的跨域問題,是瀏覽器施加的安全限制所造成的。
跨域是指跨域名的訪問,有三種情況:
- 域名不同的跨域
- 域名相同、埠不同的跨域
- 二級域名不同的跨域
舉例說明:
//www.123.com/index.html 調用 //www.123.com/server.php (非跨域)
//www.123.com/index.html 調用 //www.456.com/server.php (主域名不同:123/456,跨域)
//abc.123.com/index.html 調用 //def.123.com/server.php (子域名不同:abc/def,跨域)
//www.123.com:8080/index.html 調用 //www.123.com:8081/server.php (埠不同:8080/8081,跨域)
//www.123.com/index.html 調用 //www.123.com/server.php (協議不同:http/https,跨域)
請注意:localhost和127.0.0.1雖然都指向本機,但也屬於跨域。
跨域會阻止什麼操作?
瀏覽器是從兩個方面去做這個同源策略的
一是:針對介面的請求
二是:針對Dom的查詢
這點就能夠很好的防止別人把你經常訪問的網頁嵌入到 iframe 中來獲取你的個人資訊,比如 a 頁面中嵌入了 iframe,src 為不同源的 b 頁面,則在 a 中無法操作 b 中的 dom,也沒有辦法改變 b 中 dom 中的 css 樣式。
而如果 ab 是同源的話是可以獲取並操作的。
————————————————
原文鏈接://blog.csdn.net/qq_39552268/article/details/116274094
情景:前後端分離項目中,前端瀏覽器通過 ajax 非同步訪問後端介面,後端響應數據時,前端出現跨源請求被攔截的問題,也就是跨域訪問問題。
分析:前端發送請求,後端正常接收,只是後端響應數據時,前端接收有問題,問題出在前端接收響應這步上,瀏覽器會攔截跨源請求。
兩種解決方案:(身為後端開發,我們主要通過後端解決此跨域問題)
-
在前端解決:在前端通過 JSONP 的配置,設置前端允許跨域
-
在後端解決:在後端設置響應數據,允許跨域
步驟:在控制器類上,直接添加
@CrossOrigin
註解即可,其主要作用是設置響應頭,允許跨域訪問。