在做Vue3+Vite项目时,遇到了如下错误:
在请求时,后端看到的是这样:
因为写的这个接口是POST方式的,传给后端是options,所以刚开始认为可能是请求方式没有传递传成功。后来认真看了控制台报错信息:
了解到post方式变成option方式是由于跨域问题造成:
所以就要在我们Vue的项目上解决跨域问题:
在vite.config.ts中添加代理:
server:{
open:true, //默认启动项目打开页面
port:5173, //端口号
host:"0.0.0.0",
proxy:{
'/api': { //
target: "http://localhost:3000", // 目标地址
ws: true,
secure: false,
changeOrigin: true,// 是否允许跨域代理
rewrite: (path) => path.replace(/^\/api/, '') // 重定向地址
}
}
}
设置了/api之后我们在项目中就可以使用/api代替我们的http://localhost:端口号
之前使用:
修改后:
这样就解决了vue3+vite搭建项目的跨域问题!
亲测有效!!!