vue3 与 spring-boot 完成跨域访问

花下的晚风2024-11-29 13:27

spring-boot，写一个接口用于前端访问，并且给接口设置跨域访问，这里我前端的域名为 localhost:5173

java 复制代码

@RestController
@CrossOrigin(origins = "http://localhost:5173")
public class Vue3Controller {

    @GetMapping("/vue")
    public Result vue(){
        return Result.success("操作成功！");
    }
}

vue3，安装 axios 插件，创建 axios 实例，配置基础路径，向后端接口发送请求

终端输入：

java 复制代码

npm install axios

utils 目录下新建 http.js 文件，这里的基地址是后端接口的访问根路径

java 复制代码

// axios 基础封装
import axios from "axios";

const httpInstance = axios.create({
    // 项目基地址
    baseURL:'http://localhost:8888',
    timeout: 5000,
})
// 创建完记得暴露该实例
export default httpInstance

在 apis 目录下新建 testVue.js 文件，调用 axios 实例，访问 /vue 接口

java 复制代码

import httpInstance from '@/utils/http'

// 给实例传入具体路径，即在最末尾拼接 url
export function getCategory(){
    return httpInstance({
        url: 'vue'
    })
}

在 main.js 中启动 testAPI.js,并打印在控制台,导入 getCategory 函数即可

java 复制代码

//测试接口函数
import {getCategory} from '@/apis/testAPI'
getCategory().then(res => {
    console.log(res)
})

访问 app.vue，显示操作成功!：