前端调用后端接口,返回200,但是数据返回的是html标签

本文讲述了作者在前后端分离项目中遇到的跨域问题,通过调整axios的baseURL配置以及在vite.config.js中设置代理,解决了前端与后端使用不同端口导致的跨域问题,成功实现了前后端接口的联调。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是一个前后端分离的项目,后端已经完成,后端在本地上,自动创建了数据库,前端为了完成一个注册功能,去调用后端的/registerUser接口,当输入用户名和密码的时候,我也查过csdn上其他博主的回答,但是并不能很清除的去解决我的问题,这边的bug是返回的虽然是 200 响应状态码,但是返回的数据是一串html,其实是发生了跨域问题,就是前端与后端使用的端口号不同产生的。

然后我再在axios文件夹 加上一个 baseURL ,可以进axios官网去找baseURL的配置,目的是为了便于axios实例的方法传递相对URL。

axios中文文档|axios中文网 | axios

然后我们再调用 后端的接口,然后出现了跨域的问题

然后我们应该去配置 vite.config.js中的代理。(下方是代理的官网)

开发服务器选项 | Vite 官方中文文档

然后去 vite 官网找到 配置-----服务器选项------server.proxy

复制到 vite.config.js文件中,把其中的target 改成自己后端的端口地址,也就是 刚刚设置baseURL 的地址

也需要把  baseURL 改成 '/api'

再次调用后端接口,成功解决前后端跨域问题,完成前后端接口联调

在Vue3中,ref是一个函数,用于创建一个响应式的引用。它接受一个初始值作为参数,并返回一个可通过.value访问和修改值的对象。 例如,我们可以使用ref创建一个名为a的引用,并将其初始化为0: const a = ref(0); 我们可以通过访问a.value来获取或修改a的值: console.log(a.value); // 输出0 a.value = 1; console.log(a.value); // 输出1 除了基本类型外,我们还可以为ref的值指定更复杂的类型。可以使用Ref类型来明确指定ref内的值的类型。 例如,我们可以创建一个引用,其值可以是字符串或数字: import type { Ref } from 'vue'; const year: Ref<string | number> = ref('2020'); year.value = 2020; // 成功! 在模板中使用ref时,需要注意自动"解包"只适用于ref作为模板渲染上下文的顶层属性的情况。如果ref是嵌套在对象中的属性,则需要手动解包。 例如,在模板中使用obj.count时,需要通过obj.count.value来访问ref的值: <script setup> import { ref } from 'vue'; const obj = { count: ref(1) } </script> <template> <div>{{ obj.count.value }}</div> </template> 这样,我们就可以正确地使用Vue3中的ref了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue3超详细的ref()用法,看这一篇就够了](https://blog.csdn.net/EchoLiner/article/details/130445600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值