解決前端調(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)）
開發(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)文章
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
關(guān)于Element Loading的全局使用(自定義Loading)
這篇文章主要介紹了關(guān)于Element Loading的全局使用(自定義Loading),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue中使用swiper失效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析
這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue學(xué)習(xí)筆記之slot插槽用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽用法,結(jié)合實(shí)例形式對(duì)比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue實(shí)現(xiàn)移動(dòng)端拖拽懸浮按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端拖拽懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來(lái)自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問(wèn)者他們?cè)诰W(wǎng)站中的位置以及如何返回，本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式，需要的可以參考一下2023-06-06
詳解vue項(xiàng)目的構(gòu)建，打包，發(fā)布全過(guò)程
小編給大家通過(guò)本文詳細(xì)介紹了關(guān)于vue.js項(xiàng)目的構(gòu)建、打包、發(fā)布的全過(guò)程，文章很以后價(jià)值，值得你參考。2017-11-11
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)組件封裝的技巧,本文在Vue3的基礎(chǔ)上針對(duì)一些常見(jiàn)UI組件庫(kù)組件進(jìn)行二次封裝,旨在追求更好的個(gè)性化,更靈活的拓展,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-09-09
Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn)
這篇文章主要介紹了Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04