前端開發中經常會遇到調后端接口跨域的問題，解決方法有很多，這里不做介紹了，（有興趣的可以去這里看看：https://juejin.cn/post/6844904126246027278#heading-44）

今天主要說下Vue-Cli 中的代理，因為看到好多人按照官方文檔配置，結果卻不生效，為什么會這樣呢，無外乎配置的不正確。
先看下官方的文檔：

devServer.proxy

• Type:?string | Object

  如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過?vue.config.js?中的?devServer.proxy?選項來配置。

  devServer.proxy?可以是一個指向開發環境 API 服務器的字符串：

  module.exports = {devServer: {proxy: 'http://localhost:4000'} }

  這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:4000。

  如果你想要更多的代理控制行為，也可以使用一個?path: options?成對的對象。完整的選項可以查閱?http-proxy-middleware?。

  module.exports = {devServer: {proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}}} }

從文檔中看，這種方式是給我們開發環境用的 ，其次是我們的請求要被開發服務器接收到，且不能匹配到請求，然后我們的請求就會被代理到配置的URL。

看懂了文檔也就好找出我們配置不生效的原因,其實主要注意一下問題就行了（僅本地開發境適用，測試及生產時最好都部署在統一域名下，或者使用nginx代理）
1.配置好文件要重新啟動服務，npm run dev
2.不是用對象形式代理的話比較簡單，proxy: 'http://iqoo.want.com',就行了，前提是 .env.development 等環境文件中沒有配置API默認路徑，如果配置API的URL，就要注釋掉，或者改為本地路徑，否則代理不會生效，

NODE_ENV=development VUE_APP_API_URL=development api url VUE_APP_API_BASE_URL=http://iqoo.want.com/需要改為 NODE_ENV=development VUE_APP_API_URL=development api url VUE_APP_API_BASE_URL=http://localhost:9090/ 端口改為自己設定的端口或者直接注釋掉NODE_ENV=development VUE_APP_API_URL=development api url ##VUE_APP_API_BASE_URL=http://iqoo.want.com/

3.path: options?成對的對象時，環境注意事項同上，這里主要注意? ?‘/api’ ,如果后端接口沒有 /api 這個路徑，那么你需要在本地默認路徑上加上，同時在代理后注銷

.env.development -------------------- NODE_ENV=development VUE_APP_API_URL=development api urlVUE_APP_API_BASE_URL=http://localhost:9090/api/ 或 VUE_APP_API_BASE_URL=/api/vue.config.js ---------------------- devServer: {port: 9090,open: true,https: false,proxy: {'/api': {target: 'http://iqoo.want.com',secure: false,pathRewrite: {'^/api' : ''}, //將/api轉換成空字符changOrigin: true,}}}

?也可以將‘’/API‘’換成真是的路徑，具體根據項目變換，如果是真是的根路徑，就不需要替換成空了
?

VUE_APP_API_BASE_URL=http://localhost:9090/Service/ 或 VUE_APP_API_BASE_URL=/Service/devServer: {port: 9090,open: true,https: false,proxy: {'/Service': {target: 'http://iqoo.want.com',secure: false,changOrigin: true,}}}

環境和配置都沒問題的話基本都會生效的（我沒遇到的問題除外.......）

總結

以上是生活随笔為你收集整理的关于Vue-Cli proxy 不生效的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。