当前位置: 首页 > article >正文

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


http://www.kler.cn/a/419097.html

相关文章:

  • 远程桌面协助控制软件 RustDesk v1.3.3 多语言中文版
  • 【力扣】541.反转字符串2
  • 数据结构-查找(四)总结与对比
  • 第六届金盾信安杯-SSRF
  • 看华为,引入IPD的正确路径
  • 解决在mysql容器内修改了my.conf文件,导致mysql启动后又失败:mysql容器的状态一直处于Restarting
  • Maven java 项目,想执行verify阶段指令,通常需要配置哪些插件呢?
  • YOLOv8-ultralytics-8.2.103部分代码阅读笔记-ops.py
  • Java知识及热点面试题总结(二)
  • 远程桌面协助控制软件 RustDesk v1.3.3 多语言中文版
  • 精准用户获取与私域流量运营:多商户链动 2+1 模式商城小程序的赋能策略
  • Linux内核编译流程(Ubuntu24.04+Linux Kernel 6.8.12)
  • spring boot 调用C#封装的DLL文件中的函数
  • 力扣3372.连接两棵树后最大目标节点数目I
  • 内网使用docker搭建librespeed测速网站
  • 挑战用React封装100个组件【004】
  • UaGateway:实现OPC DA和OPC UA的高效转换
  • FFmpeg一些常用的命令
  • ElasticSearch的学习
  • JAVA中HashMap、TreeMap、LinkedHashMap 的用法与注意事项
  • 简单搭建qiankun的主应用和子应用并且用Docker进行服务器部署
  • AI高中数学教学视频生成技术:利用通义千问、MathGPT、视频多模态大模型,语音大模型,将4个模型融合 ,生成高中数学教学视频,并给出实施方案。
  • MySQL索引与分区:性能优化的关键
  • openbmc dbus架构简析(二)
  • DDR3与MIG IP核详解(一)
  • ESP32-S3模组上跑通ES8388(12)