vue3 与 spring-boot 完成跨域访问

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,显示操作成功!:

相关推荐
愿你天黑有灯下雨有伞3 小时前
告别复杂配置!Spring Boot优雅集成百度OCR的终极方案
spring boot·百度·ocr
试图让你心动9 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_9 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏10 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
双力臂40411 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
小毛驴85011 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
itLaity12 小时前
基于Kafka实现简单的延时队列
spring boot·分布式·kafka
midsummer_woo12 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端
JSON_L15 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊15 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js