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

来源:https://www.cnblogs.com/luisblog/archive/2022/11/10/16877349.html
-Advertisement-
Play Games

前後端分離開發,必須解決跨域問題! 跨域:對於 url 如 http://localhost:8080,請求協議、ip 地址、埠號,只要發送請求方和接收請求方的這三個數據中,只要有一個不同,就表示是跨域訪問! AJAX 跨域訪問:用戶訪問 A 網站時所產生的對 B 網站的跨域訪問請求均提交到 A ...


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

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

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

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

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

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

其他說明參考:

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

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

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

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

  2. 跨域是指跨功能變數名稱的訪問,有三種情況:

    • 功能變數名稱不同的跨域
    • 功能變數名稱相同、埠不同的跨域
    • 二級功能變數名稱不同的跨域
  3. 舉例說明:

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

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

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

    一是:針對介面的請求

    二是:針對Dom的查詢

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

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

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

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

image-20221110143523088

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

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

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

  2. 在後端解決:在後端設置響應數據,允許跨域(開發階段可用)

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

  3. 在後端解決:通過 Nginx 配置(較優)

都看到最後了,右下角來個贊鴨!-.- 歡迎評論留言~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天用spring boot 做項目的時候,使用到了redis來做緩存。 然後在存入redis的時候遇到了亂碼的問題,這個問題是出現在序列化上,但是這個問題很好解決,晚上的方法也很多。 因為 redis 是將數據存儲在記憶體中的,在存入數據的時候需要對數據進行序列化的操作,問題就是出現在這裡。 我們修 ...
  • 註釋 給別人看的,機器並不會執行這行語句 1.單行註釋 // 我是單行註釋 2.多行註釋 /* 我是多行註釋 我是多行註釋 我是多行註釋 我是多行註釋 */ // 這是一個main函數,這個是go語言啟動的入口 func main() { //fmt.Println :列印一句話,然後執行完畢後,進 ...
  • 大家好,這篇文章跟大家聊下 SpringCloudAlibaba 中的微服務組件 Nacos。Nacos 既能做註冊中心,又能做配置中心,這篇文章主要來聊下做配置中心時 client 端的一些設計,主要從源碼層面進行分析,相信看完這篇文章你對 Nacos client 端的工作原理應該有比較深刻的了 ...
  • 這一篇文章主要介紹一些python的基礎知識,包括演算法、數字和表達式、變數、語句、獲取用戶輸入等。 什麼是演算法 什麼是電腦編程呢?簡單的來說,電腦編程就是告訴電腦如何做。 而演算法只不過是流程或菜譜的時髦說法,詳盡的描述瞭如何完成某項任務,以便於電腦更好的執行。 例如下麵的菜譜,雞蛋火腿腸: ...
  • 一個龐大的分散式系統,各個組件間是如何協調工作的?組件是如何解耦的?線程運行如何更高效,減少阻塞帶來的低效問題?本節將對 Yarn 的服務庫和事件庫進行介紹,看看 Yarn 是如何解決這些問題的。 ...
  • 簡介: 原型模式,屬於創建型模式的一種。 主要針對對象進行克隆,把被克隆的對象稱之為原型,原型模式稱之為克隆模式也許更為貼切。 用原型實例指定創建對象的種類,並且通過拷貝這些原型創建新的對象。 適用場景: 實例化對象的資源開銷過大時可直接克隆。 需要迴圈創建大量對象,此時用克隆也是一個挺不錯的選擇。 ...
  • 1 文件結構 每個C/C++程式通常分為兩個文件,頭文件(保存程式的聲明)和定義文件(保持程式的實現)。 頭文件以“.h”為尾碼;C程式的定義文件以“.c”為尾碼,C++程式的定義文件通常以“.cpp”為尾碼(也有一些“.cc”、“.cxx”、“.hpp”為尾碼)。 1.1 版權和版本的聲明 每個頭 ...
  • 前言 大家早好、午好、晚好吖 ❤ ~ 最近,一部名叫《點燃我,溫暖你》得電視劇衝進了大家得視野~ 講述得是肆意張揚的編程天才李峋與勇敢堅韌的少女學霸朱韻從青澀校園到職場拼搏幾經波折,依然攜手前行的成長愛情故事! 其中李峋用代碼做出的紅色跳動的愛心,一下子跳到朱韻的心坎里,同樣也跳到我們的心坎 今天, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...