解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標(biāo)簽
這是一個(gè)前后端分離的項(xiàng)目，后端已經(jīng)完成，后端在本地上，自動(dòng)創(chuàng)建了數(shù)據(jù)庫(kù)，前端為了完成一個(gè)注冊(cè)功能，去調(diào)用后端的/registerUser接口，當(dāng)輸入用戶名和密碼的時(shí)候，我也查過(guò)csdn上其他博主的回答，但是并不能很清除的去解決我的問(wèn)題，這邊的bug是返回的雖然是 200 響應(yīng)狀態(tài)碼，但是返回的數(shù)據(jù)是一串html，其實(shí)是發(fā)生了跨域問(wèn)題，就是前端與后端使用的端口號(hào)不同產(chǎn)生的。
然后我再在axios文件夾 加上一個(gè) baseURL ，可以進(jìn)axios官網(wǎng)去找baseURL的配置，目的是為了便于axios實(shí)例的方法傳遞相對(duì)URL。
axios中文文檔|axios中文網(wǎng) | axios
然后我們?cè)僬{(diào)用 后端的接口，然后出現(xiàn)了跨域的問(wèn)題
然后我們應(yīng)該去配置 vite.config.js中的代理。（下方是代理的官網(wǎng)）
開(kāi)發(fā)服務(wù)器選項(xiàng) | Vite 官方中文文檔
然后去 vite 官網(wǎng)找到 配置-----服務(wù)器選項(xiàng)------server.proxy
復(fù)制到 vite.config.js文件中，把其中的target 改成自己后端的端口地址，也就是 剛剛設(shè)置baseURL 的地址
也需要把 baseURL 改成 '/api'
再次調(diào)用后端接口，成功解決前后端跨域問(wèn)題，完成前后端接口聯(lián)調(diào)
總結(jié)
到此這篇關(guān)于解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標(biāo)簽的文章就介紹到這了,更多相關(guān)調(diào)用后端接口返回200但返回html標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue驗(yàn)證碼組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Vue使用xlsx模塊實(shí)現(xiàn)讀寫(xiě)Excel文檔內(nèi)容
在前端項(xiàng)目開(kāi)發(fā)中,讀寫(xiě)Excel文件的需求變得越來(lái)越常見(jiàn),本文將詳細(xì)介紹如何在Vue項(xiàng)目中利用FileReader對(duì)象和xlsx模塊來(lái)讀取Excel文件的內(nèi)容,需要的可以參考下2024-03-03
正則表達(dá)式是由一些特定的字符組成,代表一個(gè)規(guī)則,可以用來(lái)檢驗(yàn)數(shù)據(jù)格式是否合法,也可以在一段文本中查找滿足要求的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VUE正則表達(dá)式用法的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue項(xiàng)目中引入translate.js實(shí)現(xiàn)國(guó)際化自動(dòng)翻譯功能實(shí)例
translate.js幫你一行代碼搞定翻譯,支持Google、DeepL、LibreTranslate等多個(gè)主流翻譯引擎,Node.js和瀏覽器通用,這篇文章主要介紹了Vue項(xiàng)目中引入translate.js實(shí)現(xiàn)國(guó)際化自動(dòng)翻譯功能的相關(guān)資料,需要的朋友可以參考下2025-07-07
vue3如何定義變量及ref、reactive、toRefs特性說(shuō)明
這篇文章主要介紹了vue3如何定義變量及ref、reactive、toRefs特性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在vue中import()語(yǔ)法不能傳入變量的問(wèn)題及解決
這篇文章主要介紹了在vue中import()語(yǔ)法不能傳入變量的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點(diǎn)選驗(yàn)證碼為例,不需要鍵盤(pán)手動(dòng)輸入,極大優(yōu)化了傳統(tǒng)驗(yàn)證碼用戶體驗(yàn)不佳的問(wèn)題,感興趣的朋友一起看看吧2023-12-12
Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作
這篇文章主要介紹了Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue cli+mui 區(qū)域滾動(dòng)的實(shí)例代碼
下面小編就為大家分享一篇Vue cli+mui 區(qū)域滾動(dòng)的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06