前後端分離項目解決前端跨域訪問問題

前後端分離開發,必須解決跨域問題!

跨域:對於 url 如 //localhost:8080,請求協議、ip 地址、埠號,只要發送請求方和接收請求方的這三個數據中,只要有一個不同,就表示是跨域訪問!

AJAX 跨域訪問:用戶訪問 A 網站時所產生的對 B 網站的跨域訪問請求均提交到 A 網站的指定頁面

跨域問題,可以理解為瀏覽器的一種保護機制,不接收不被信任的請求。

如果前端和後端集中開發,比如單體項目中,他們的請求都是統一的,則不存在跨域問題!

跨域問題主要出現在前後端分離的項目中,前端和後端分離,請求方式不統一,此時必須解決跨域問題!

其他說明參考:

  1. 跨域,指的是瀏覽器不能執行其他網站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器施加的安全限制。

    最簡單的說就是從當前域名的網站下不能請求非同源的地址。

    所謂同源是指,域名,協議,埠均相同,只要有一個不同,就是跨域。

    請特別注意:跨域問題是針對於瀏覽器的,因為需要解決的跨域問題,是瀏覽器施加的安全限制所造成的。

  2. 跨域是指跨域名的訪問,有三種情況:

    • 域名不同的跨域
    • 域名相同、埠不同的跨域
    • 二級域名不同的跨域
  3. 舉例說明:

    //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雖然都指向本機,但也屬於跨域。

  4. 跨域會阻止什麼操作?

    瀏覽器是從兩個方面去做這個同源策略的

    一是:針對介面的請求

    二是:針對Dom的查詢

    這點就能夠很好的防止別人把你經常訪問的網頁嵌入到 iframe 中來獲取你的個人資訊,比如 a 頁面中嵌入了 iframe,src 為不同源的 b 頁面,則在 a 中無法操作 b 中的 dom,也沒有辦法改變 b 中 dom 中的 css 樣式。

    而如果 ab 是同源的話是可以獲取並操作的。

————————————————
原文鏈接://blog.csdn.net/qq_39552268/article/details/116274094

情景:前後端分離項目中,前端瀏覽器通過 ajax 非同步訪問後端介面,後端響應數據時,前端出現跨源請求被攔截的問題,也就是跨域訪問問題。

image-20221110143523088

分析:前端發送請求,後端正常接收,只是後端響應數據時,前端接收有問題,問題出在前端接收響應這步上,瀏覽器會攔截跨源請求。

兩種解決方案:(身為後端開發,我們主要通過後端解決此跨域問題)

  1. 在前端解決:在前端通過 JSONP 的配置,設置前端允許跨域

  2. 在後端解決:在後端設置響應數據,允許跨域

    步驟:在控制器類上,直接添加 @CrossOrigin 註解即可,其主要作用是設置響應頭,允許跨域訪問。

Tags: