vue3 与 spring-boot 完成跨域访问
spring-boot,写一个接口用于前端访问,并且给接口设置跨域访问,这里我前端的域名为 localhost:5173
@RestController
@CrossOrigin(origins = "http://localhost:5173")
public class Vue3Controller {
@GetMapping("/vue")
public Result vue(){
return Result.success("操作成功!");
}
}
vue3,安装 axios 插件,创建 axios 实例,配置基础路径,向后端接口发送请求
终端输入:
npm install axios
utils 目录下新建 http.js 文件,这里的基地址是后端接口的访问根路径
// axios 基础封装
import axios from "axios";
const httpInstance = axios.create({
// 项目基地址
baseURL:'http://localhost:8888',
timeout: 5000,
})
// 创建完记得暴露该实例
export default httpInstance
在 apis 目录下新建 testVue.js 文件,调用 axios 实例,访问 /vue 接口
import httpInstance from '@/utils/http'
// 给实例传入具体路径,即在最末尾拼接 url
export function getCategory(){
return httpInstance({
url: 'vue'
})
}
在 main.js 中启动 testAPI.js,并打印在控制台,导入 getCategory 函数即可
//测试接口函数
import {getCategory} from '@/apis/testAPI'
getCategory().then(res => {
console.log(res)
})
访问 app.vue,显示操作成功!: