快捷導航

vue中前端代理跨域問題實例總結(jié)

更新時間：2022年04月07日 14:34:42 作者：Aasee.

前后端分離進行項目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

這幾天在學習vue進行前后端交互時出現(xiàn)了跨域問題，也是經(jīng)歷查文章查文檔和自己實踐總結(jié)才最終解決。這篇文章就對此進行總結(jié)，以防忘記，同時也希望能對正在經(jīng)歷該問題困擾的同學們有所幫助。注意：這里講解的是vue2.x版本的方法！

第一

首先我們需要先確定我們所使用的接口名，我這里使用的自己Java后端的接口和python后端的接口

http://localhost:8081/articles/findArticlePage
http://127.0.0.1:5000//api/tryChat

可以看到我這里使用了兩個不同的端口，所有可以說基本可以滿足大多數(shù)人的需求了。

在main.js文件中定義全局變量axios

Vue.prototype.$axios = axios

第二

我們通過我們所需調(diào)用的接口去改寫config文件夾中的index.js文件

以我的為例子，先找到proxyTable，我們需要在這里去修改我們需要配置的跨域代理。

以我需要的接口為例進行配置代理，大家可以仿照我的例子來改。

重寫請求地址那里大家如果是和我一樣進行命名的話設(shè)不設(shè)置為空都差不多。

可以看到我是根據(jù)接口的地址來寫這個配置的名稱的，這樣不容易出錯，血的教訓不然弄半天都還是不成功。

至于在dev.env.js文件和prod.env.js文件的配置如下，我試了不配重啟vue項目也沒問題依舊可以實現(xiàn)跨域。具體為啥沒有深入研究，各位大大佬有知道的也可以指點一二。

dev.env.js

prod.env.js

第三

接下來就可以去對后端進行請求了，這是我寫的例子。

這里只是總結(jié)跨域的書寫與經(jīng)驗，其他就不過多展示了。這樣一套操作下來基本就解決了大多數(shù)人的需求了，我也是試了很多次才實現(xiàn)的，我看網(wǎng)上大多的教程都很死板的，遂自我總結(jié)一下我的經(jīng)驗和方法。我自己覺得最好是取得名字和接口中的有所對應比較容易成功。

代碼

當然啦，我還是準備了一下代碼讓大家可以直接cv ，方便快捷

'/articles': {
                // websocket
                ws: false,
                // 目標地址
                target: 'http://localhost:8081/',
                //發(fā)送請求頭host會被設(shè)置target
                changeOrigin: true,
                // 重寫請求地址
                pathReWrite: {
                  '^/articles': '/articles'
                }
              },
              
              // prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  api: '"http://127.0.0.1:5000/"',
  articles:'"http://localhost:8081/"',
  }
  
			// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  api: '"/api/"',
  articles: '"/articles/"'
})

好了，總結(jié)完畢，大家如果出現(xiàn)其他問題或者還是沒看太懂的也可以問我，我一定會盡力解答，當然前提是我懂。