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

如果在後端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