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

来源: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 Framework 4.8 開發的深度學習模型部署測試平臺,提供了YOLO框架的主流系列模型,包括YOLOv8~v9,以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景,同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱,重啟開發之路 十年前,我沉浸在開發的海洋中,每日與代碼為伍,與演算法共舞。那時的我,滿懷激情,對技術的追求近乎狂熱。然而,隨著歲月的流逝,生活的忙碌逐漸占據了我的大部分時間,讓我無暇顧及技術的沉澱與積累。 十年間,我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者,我見證了 ...
  • C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺,平臺包含了語言規範、工具、運行,支持開發各種應用,如Web、移動、桌面等。.NET框架有多個實現,如.NET Framework、.NET Core(及後續的.NET 5+版本),以及社區版本M... ...
  • 前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫,記錄了使用電腦模擬,模擬PLC,直至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1. PLC開發編程環境GX Works2,GX Works2下載鏈接 https:// ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝 ...
  • 前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了,這篇文章整點js代碼來測一下bug。測試網站:https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向(MD5加密,AES加密)附完整源碼 ...
  • 引言 現代的操作系統(Windows,Linux,Mac OS)等都可以同時打開多個軟體(任務),這些軟體在我們的感知上是同時運行的,例如我們可以一邊瀏覽網頁,一邊聽音樂。而CPU執行代碼同一時間只能執行一條,但即使我們的電腦是單核CPU也可以同時運行多個任務,如下圖所示,這是因為我們的 CPU 的 ...
  • 掌握使用Python進行文本英文統計的基本方法,並瞭解如何進一步優化和擴展這些方法,以應對更複雜的文本分析任務。 ...
  • 背景 Redis多數據源常見的場景: 分區數據處理:當數據量增長時,單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源,可以將數據分區存儲在不同的實例中,使得數據處理更加高效。 多租戶應用程式:對於多租戶應用程式,每個租戶可以擁有自己的Redis數據源,以確保數據隔離和安全性。 ...