前後端分離開發,必須解決跨域問題! 跨域:對於 url 如 http://localhost:8080,請求協議、ip 地址、埠號,只要發送請求方和接收請求方的這三個數據中,只要有一個不同,就表示是跨域訪問! AJAX 跨域訪問:用戶訪問 A 網站時所產生的對 B 網站的跨域訪問請求均提交到 A ...
前後端分離開發,必須解決跨域問題!
跨域:對於 url 如 http://localhost:8080
,請求協議、ip 地址、埠號,只要發送請求方和接收請求方的這三個數據中,只要有一個不同,就表示是跨域訪問!
AJAX 跨域訪問:用戶訪問 A 網站時所產生的對 B 網站的跨域訪問請求均提交到 A 網站的指定頁面
跨域問題,可以理解為瀏覽器的一種保護機制,不接收不被信任的請求。
如果前端和後端集中開發,比如單體項目中,他們的請求都是統一的,則不存在跨域問題!
跨域問題主要出現在前後端分離的項目中,前端和後端分離,請求方式不統一,此時必須解決跨域問題!
其他說明參考:
跨域,指的是瀏覽器不能執行其他網站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器施加的安全限制。
最簡單的說就是從當前功能變數名稱的網站下不能請求非同源的地址。
所謂同源是指,功能變數名稱,協議,埠均相同,只要有一個不同,就是跨域。
請特別註意:跨域問題是針對於瀏覽器的,因為需要解決的跨域問題,是瀏覽器施加的安全限制所造成的。
跨域是指跨功能變數名稱的訪問,有三種情況:
- 功能變數名稱不同的跨域
- 功能變數名稱相同、埠不同的跨域
- 二級功能變數名稱不同的跨域
舉例說明:
http://www.123.com/index.html 調用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 調用 http://www.456.com/server.php (主功能變數名稱不同:123/456,跨域)
http://abc.123.com/index.html 調用 http://def.123.com/server.php (子功能變數名稱不同:abc/def,跨域)
http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.php (埠不同:8080/8081,跨域)
http://www.123.com/index.html 調用 https://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 是同源的話是可以獲取並操作的。
————————————————
原文鏈接:https://blog.csdn.net/qq_39552268/article/details/116274094
情景:前後端分離項目中,前端瀏覽器通過 ajax 非同步訪問後端介面,後端響應數據時,前端出現跨源請求被攔截的問題,也就是跨域訪問問題。
分析:前端發送請求,後端正常接收,只是後端響應數據時,前端接收有問題,問題出在前端接收響應這步上,瀏覽器會攔截跨源請求。
下麵提供幾種解決方案:(身為後端開發,我們主要通過後端解決此跨域問題)
-
在前端解決:在前端通過 JSONP 的配置,設置前端允許跨域
-
在後端解決:在後端設置響應數據,允許跨域(開發階段可用)
步驟:在控制器類上,直接添加
@CrossOrigin
註解即可,其主要作用是設置響應頭,允許跨域訪問。 -
在後端解決:通過 Nginx 配置(較優)
都看到最後了,右下角來個贊鴨!-.- 歡迎評論留言~