目录

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

目录

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

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

https://i-blog.csdnimg.cn/blog_migrate/7cc10ca176fa5b9c77c654cc0f71c9b8.png

https://i-blog.csdnimg.cn/blog_migrate/7d45a0ae2a5a01450a7109a13f8432da.png 然后我再在axios文件夹 加上一个 baseURL ,可以进axios官网去找baseURL的配置,目的是为了便于axios实例的方法传递相对URL。

https://i-blog.csdnimg.cn/blog_migrate/28d7c270ff5a7b3e2a38df8373ed8de5.png

https://i-blog.csdnimg.cn/blog_migrate/d3f9b7dd13c3cd43b56f8a9c40d8ffc9.png

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

https://i-blog.csdnimg.cn/blog_migrate/940ef00fda8209733c944a0fcb404930.png

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

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

https://i-blog.csdnimg.cn/blog_migrate/142b7195ebadcac5fa1a7354a1c0c6c7.png

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

https://i-blog.csdnimg.cn/blog_migrate/cf74d524503d9a0263d726a812fc87dc.png

也需要把  baseURL 改成 ‘/api’

https://i-blog.csdnimg.cn/blog_migrate/4399313c8c6ecf973727f7f33edc9071.png

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

https://i-blog.csdnimg.cn/blog_migrate/b13b8f5879bc4988b08714ac36f31bc7.png