快捷導(dǎo)航

vue中前端代理跨域問(wèn)題實(shí)例總結(jié)

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

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

前言

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

第一

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

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

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

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

Vue.prototype.$axios = axios

第二

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

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

以我需要的接口為例進(jìn)行配置代理，大家可以仿照我的例子來(lái)改。

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

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

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

dev.env.js

prod.env.js

第三

接下來(lái)就可以去對(duì)后端進(jìn)行請(qǐng)求了，這是我寫(xiě)的例子。

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

代碼

當(dāng)然啦，我還是準(zhǔn)備了一下代碼讓大家可以直接cv ，方便快捷

'/articles': {
                // websocket
                ws: false,
                // 目標(biāo)地址
                target: 'http://localhost:8081/',
                //發(fā)送請(qǐng)求頭host會(huì)被設(shè)置target
                changeOrigin: true,
                // 重寫(xiě)請(qǐng)求地址
                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)其他問(wèn)題或者還是沒(méi)看太懂的也可以問(wèn)我，我一定會(huì)盡力解答，當(dāng)然前提是我懂。