webpack之proxyTable設定跨域

2022-06-08 22:09:16 字數 1039 閱讀 5389

為什麼要使用proxytable

如何使用proxytable

還是拿之前使用過的vue-cli舉例。我們首先要在專案目錄中找到根目錄下config資料夾下的index.js檔案。由於我們是在開發環境下使用,自然而然是要配置在dev裡面:

dev: 

},csssourcemap: false

}

上面這段**的效果就是將本地8080埠的乙個請求**到了這一網域名稱下:

沒有統一專案名下的使用

上面那種情況是有乙個統一的專案名api的,所以說是比較好匹配的,就相當於說直接將以api開頭的介面名**一下換成目標網域名稱訪問就好了,可是如果說後台返給我們前端的介面沒有了統一的專案名呢?之前,我是乙個個單獨去做了轉換,介面少還沒什麼關係,但多了肯定是不現實的,前段時間在一次面試中受到了面試官的啟發想到了這樣一種取巧的方案:

``//先人為給介面位址前面加上乙個自定義的專案名

let someapi = 'api' + '/xx/xx';

dev:

},csssourcemap: false

}```

這裡的專案名api是我們人為加上去的,經過**之後就沒了,這樣我們在配置**這裡還是只需要配置乙份就夠了,只是在寫介面位址時要注意區分開發環境和線上環境就可以了。

關於proxytable的原理

這個**實際上是利用http-proxy-middleware這個外掛程式完成的,本地伺服器將請求**給了目標伺服器。之所以出現跨域是因為瀏覽器有同源策略的限制,但伺服器是沒有的,所以這種**方式能夠實現的機制大體就是:

本地伺服器 --》 ** --》目標伺服器 --》拿到資料後通過**偽裝成本地服務請求的返回值 ---》然後瀏覽器就順利收到了我們想要的資料

webpack學習之路之webpack核心概念

webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口,這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口,告...

webpack學習之webpack基本配置

壓縮檔案 分割 提取公用 模組合併 把多個模組合併 自動重新整理 熱更新 改變,自動重新整理頁面 由於外掛程式可以攜帶引數 選項,必須在 webpack 配置中,向 plugins 屬性傳入的是外掛程式的例項。let require clean webpack plguin new cleanweb...

雜談之webpack篇

預留個空位,待上線。先學習react,回來補上。又看了webpack的文件不知道該怎麼下筆好,還是先寫react 吧,對webpack理解加深了在補。現在補一點webpack的知識。之前之所以不知道怎麼寫是因為把react和webpack當成離散的知識點了,而實際應用應該把離散的知識貫穿起來。首先應...