vue跨域問題解決:Access to XMLHttpRequest at‘httplocalhost

来源:https://www.cnblogs.com/suncolor/archive/2022/11/23/16918181.html
-Advertisement-
Play Games

如果在後端django里配置了django-cors-headers,前端還是報Access to XMLHttpRequest at‘httplocalhost這樣的跨域問題,可以通過以下的方式解決! 通過配置vue.config.js、proxy 實踐解決跨域方法(基於封裝好的axios,非原生 ...


如果在後端django里配置了django-cors-headers,前端還是報Access to XMLHttpRequest at‘httplocalhost這樣的跨域問題,可以通過以下的方式解決!

通過配置vue.config.js、proxy

實踐解決跨域方法(基於封裝好的axios,非原生)

1、在vue項目根目錄下找到vue.config.js文件(如果沒有該文件則自己創建),在proxy中設置跨域,在proxy中設置要訪問的地址,並重寫/api為空的字元串。

vue.config.js
 
// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy進行跨域的原理是:
//將功能變數名稱發送給本地的伺服器(啟動vue項目的服務,loclahost:8080),
//再由本地的伺服器去請求真正的伺服器。
module.exports = {
  devServer:{
    proxy:{
      '/api':{//表示攔截以/api開頭的請求路徑
        target:'http://(這裡填你項目真實的後端地址)',
        changOrigin: true,//是否開啟跨域
        pathRewrite:{
          '^/api':'' //重寫api,把api變成空字元,因為我們真正請求的路徑是沒有api的
        }
      }
    }
  }
}

2.將base_url設置成api

export default {
    base_url: 'api'
}

再補充一下原理:

1、為什麼要重寫api變為空字元?

因為如果像我們那樣配置好後,我們請求的實際路徑會帶上api,但我們發起請求的時候是不需要api的,所以要把他變成空字元。

2、在vue中使用proxy進行跨域的原理是:

將功能變數名稱發送給本地的伺服器(啟動vue項目的服務,loclahost:8080),再由本地的伺服器去請求真正的伺服器。
————————————————
版權聲明:本文為CSDN博主「jahdgja」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/jahdgja/article/details/127858298


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

-Advertisement-
Play Games
更多相關文章
  • Android網路請求(4) 網路請求框架Volley Volley是Google在2013年5月15日到17日在舊金山Moscone中心舉辦網路開發者年會中推出的Android非同步網路載入框架和圖片載入框架,它特別適合數據體量小且通訊頻繁的網路操作場景,而Android開發中大多數場景都是這樣的, ...
  • 華為HMS Core音頻編輯服務(Audio Editor Kit)依托自身AI技術的研發優勢,上線全新的歌聲合成音色及伴奏,給音視頻創作者提供更多的創作可能。在短視頻場景中,用戶自定義歌詞的歌聲結合視頻讓用戶感受到身臨其境,自由表達自己的情緒;在虛擬偶像場景中,歌聲合成功能賦予虛擬歌手們演唱風格各 ...
  • Vue CartView.vue script 數組的filter函數需要return顯式返回布爾值,該方法得到一個新數組。 使用Vuex store的modules方式,註意讀取狀態的方式 this.$store.state.cart.items 刷新頁面後state狀態還原,需要用session ...
  • vue 指令與過濾器 內容渲染指令 內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有3種。 v-text 示例 <div id="app"> <!-- 把 username 對應的值,渲染到第一個 p 標簽中 --> <p v-text="username"></p> ...
  • vue3 正式發佈有兩年多了,之前也做過一些學習和研究。vue3 發佈後給某培訓機構開發了一套vue3課程課件,自己也開源了一套基於vue3的後臺管理系統(因為個人懶的原因,半年後才上傳到gitHub,且到目前為止一直沒有更新過)。 附上網址:https://github.com/gegestst1 ...
  • 情景說明: 之前用 vue 做數據綁定更新時,發現一個莫名奇妙的問題。 我在 vue 實例中聲明瞭一個數組屬性如 books: [],在非同步請求的回調函數中使用 this.books = res.data.data; 進行數據更新,更新步驟後面緊跟著列印了 console.log(this.book ...
  • webpack優化主要有三個方面:1.提高構建速度,2.減少打包體積,3.優化用戶體驗 提高構建速度: 啟用多線程 thread-loader 使用thread-loader插件可以啟用多線程進行構建。 使用緩存 cache-loader 使用cache-loader插件可以對構建進行緩存,加快後續 ...
  • 前言: 昨天咱們已經把貪吃蛇的頁面寫好了,今天咱們來寫 TS 部分 TS 我們要用面向對象的形式去編寫我們的功能,所以我們要以一個功能去定義一個對象 把這個項目分成幾個模塊,也就是幾個對象功能 Food類(食物類): 寫對象的前提,我們要去定義類,用類去創建對象 首先我們直接 class 一個 Fo ...
一周排行
    -Advertisement-
    Play Games
  • 簡介 本文的初衷是希望幫助那些有其它平臺視覺演算法開發經驗的人能快速轉入Halcon平臺下,通過文中的示例開發者能快速瞭解一個Halcon項目開發的基本步驟,讓開發者能把精力完全集中到演算法的開發上面。 首先,你需要安裝Halcon,HALCON 18.11.0.1的安裝包會放在文章末尾。安裝包分開發和 ...
  • 本文是對Datawhale的動手學數據分析課程的學習總結,記錄了整體的學習過程、答案以及個人感想,代碼較為詳細。 ...
  • JZ7重建二叉樹 描述 給定節點數為 n 的二叉樹的前序遍歷和中序遍歷結果,請重建出該二叉樹並返回它的頭結點。 例如輸入前序遍歷序列{1,2,4,7,3,5,6,8}和中序遍歷序列{4,7,2,1,5,3,8,6} 提示: 1.vin.length == pre.length 2.pre 和 vin ...
  • 我們都知道在Java編程中多線程的同步使用synchronized關鍵字來標識,那麼這個關鍵字在JVM底層到底是如何實現的呢。 我們先來思考一下如果我們自己實現的一個鎖該怎麼做呢: 首先肯定要有個標記記錄對象是否已經上鎖,執行同步代碼之前判斷這個標誌,如果對象已經上鎖線程就阻塞等待鎖的釋放。 其次要 ...
  • 目錄 一.OpenGL 色階 1.Windows OpenGL ES 版本 2.Windows OpenGL 版本 二.OpenGL 色階 GLSL Shader 三.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎 零基礎 Ope ...
  • 1. 查看Linux伺服器版本信息 # cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 2. 禪道開源版安裝包下載 wget http://dl.cnezsoft.com/zentao/9.8.2/ZenTaoPMS.9.8. ...
  • Spring 框架可以為 Java 應用程式開發提供全面的基礎設施支持,它是現在非常流行的 Java 開源框架,對於一個 Java 開發人員來說,熟練掌握 Spring 是必不可少的。 ...
  • 前言 本篇是c++總結的第二篇,關於c++的對象模型,在構造、拷貝虛函數上重點分析,也包含了c++11class的新用法和特性,如有不當,還請指教! c++三大特性 訪問許可權 ​ 在c++中通過public、protected、private三個關鍵字來控製成員變數和成員函數的訪問許可權,它們分別表示 ...
  • 一.小結 1.使用二維數組來存儲表格 2.可以使用以下語法來聲明二維數組變數: 元素類型[ ] [ ]數組變數 3.可以使用以下語法來創建二維數組變數: new 元素類型 [行的個數][列的個數] 4.使用下麵的語法表示二維數組中的每個元素: 數組變數[行下標][列的個數] 5.可使用數組初始化語法 ...
  • typimg是一款為typora編輯器提供圖像自定義上傳服務的工具,該工具將在typora中輸入的網路圖片、本地圖片、剪貼板圖片/截圖上傳到博客園,支持在MacOS、Windiws、Linux三個平臺上運行。 ...