WebPack 4 x 跨域問題的解決

2021-10-21 06:12:08 字數 2484 閱讀 2320

需要使用 vue 框架建立專案,我使用 webpack 建立了乙個 vue 專案,建立命令如下:

vue init webpack co-mission
因為需要前後端分離,在測試前後端介面的時候,發現如下問題:

截圖如下:

帶著問題上網找答案,說是出現了跨域問題,具體什麼是跨域,請自行搜尋。

要解決這個問題,可以從前端或者後端入手。

我使用的後端是 django ,可以參考 這篇文章 來配置。但是我在配置完成之後,雖然後端能夠獲取到前端發來的請求,但是前端依然無法處理,還是出現這個問題,於是我放棄了在後端解決這個問題的念頭。

要是不想聽我說太多,可以直接跳轉到解決位置。

繼續上網找前端跨域的答案。

一開始找到的說是配置vue.config.js檔案,在裡面配置proxy,但是試過才知道,在前端專案啟動的時候,根本就沒有碰過這個檔案,因為在使用npm run dev時都不能檢測出我故意設定的這個檔案的語法錯誤;由於這是上課的專案,朋友做的專案跟我的一樣,在跟朋友討論了之後才發現,這個檔案是vue cli腳手架建立的專案才會讀取,於是我便嘗試用腳手架建立乙個專案,以此來測試能不能解決跨域問題;但是我並沒有成功,因為這期間出現了其它問題,這裡就不再贅述了。

通過檢視文章前面的幾個鏈結,我了解了packet.json檔案的具體內容,也了解了webpack.config.js檔案,發現自己之前竟然是命名出錯了(淚目( ĭ ^ ĭ )),然後我便開始編寫webpack.config.js檔案,但是我發現在我執行npm run dev時並沒有呼叫到這個檔案(同樣的,還是連這個檔案的語法錯誤都不能檢測到),而只能在執行webpack時才能檢測到並呼叫,但使用這個命令並不能正確啟動我的專案,所以這還是不能解決問題。

後來,我發現,在使用npm run dev啟動的時候,呼叫的配置檔案並不會呼叫到webpack.config.js檔案,而是呼叫了專案配置裡面指定的配置檔案:

於是我便通過這個檔案,找到了proxy物件的值指向的是config包裡面的proxytable物件,於是,我把跨域的資訊寫到了這個物件中,關掉了後端的跨域,結果:

跨域成功了!!!

問題解決!!!

下面附上詳細的解決方案。

執行時發現配置檔案:

開啟bulid/webpack.dev.conf.js檔案檢視:

發現proxy的內容呼叫了config包的乙個變數,找到config包的index.js檔案,修改proxytable成如下內容:

這裡配置在訪問/api開頭的資源時,預設跳轉到target的**中,並且把/api替換成空,也就是訪問target**資源時去掉/api目錄。其中proxytable的內容,可以參照直接在vue.config.js或者webpack.config.js檔案中的跨域配置進行設定。

在使用axios或者其他外掛程式訪問網路時,設定訪問的基位址為/api即可。

vue+django+webpack搭建

這篇文章是解決問題的源頭

error in entry module not found: error: can』t resolve 『./src』 in ***的乙個解決方案

我從此文章中獲知 webpack 4.x 可以不使用配置檔案配置 webpack

vue 跨域 和django跨域

這篇文章介紹了 vue 跨域和 django 的跨域的方法

webpack 4 x安裝命令

執行npm i webpack g全域性安裝webpack,這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...

webpack 4 X 基礎編譯

webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式,而是直接執行webpack mode development或者webpack mode production,這樣便會預設進行打包,入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...

webpack4 x學習筆記

有輸入必須有輸出,今天就來輸出一下學習webpack的過程。不得不先吐槽一下,比起可愛的grunt和好用的gulp,對webpack真心愛不起來!還有乙個血的教訓 千萬不要偷懶,有問題直接去官網。本文旨在記錄學習webpack的過車和遇到的問題,適合對node和webpack基礎知識有些了解的開發人...