VUE[axios跨域]+SpringBoot发布到线上方法

简介: VUE[axios跨域]+SpringBoot发布到线上方法

主页:写程序的小王叔叔的博客欢迎来访👀

支持:点赞收藏关注


1、域名

通过内网穿透工具进行指定本地ip 作为域名,我用的是 https://natapp.cn 比较好用,

2、vue 跨域配置

前端页面中,在vue的main.js中使用axis实现跨域,路由进行配置前端vue组件的访问路径,main.js

/** 测试服务器用,并且开启springboot的拦截器AxiosCorsConfig类中文件 **/axios.defaults.baseURL=process.env.NODE_ENV==="production"?"http://xn--eqrt2g/": "http://xn--eqrt2g/";

router.js路由

exportdefaultnewRouter({
mode: "history",
//base: process.env.BASE_URL, /**开发环境使用**/base: "/bjxvue/",/**配置前台访问的路径**/routes: [
    {
path: "/",
name: " ",
component: shopindex    },
.........    {
path: "/shopindex",
name: "shopindex",
component: shopindex    }
  ]
});

configjs

constpath=require("path");
module.exports= {
publicPath: "./",
pages: {
index: "src/main.js"  },
configureWebpack: config=> {
Object.assign(config, {
// 开发生产共同配置resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
"@c": path.resolve(__dirname, "./src/components"),
"@a": path.resolve(__dirname, "./src/assets")
        }
      }
    });
  }/*,  devServer: {    proxy: {      "/drp": {        target: "http://xn--eqrt2g/", //这个是你要访问得接口地址        changeOrigin: true,        pathRewrite: {          //重写地址  比如说 你的接口地址是'http://10.10.1.10/system/getUserInfo' 你请求得时候地址只需要写'/test/getUserInfo'          "/ROOT": ""        }      }    }  }*/};

3、springboot

packagecom.*.*.tools;
importorg.springframework.context.annotation.Bean;
importorg.springframework.context.annotation.Configuration;
importorg.springframework.web.servlet.config.annotation.CorsRegistry;
importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;
importorg.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SuppressWarnings("all")
@ConfigurationpublicclassAxiosCorsConfig {
/**生产环境不适用,开发环境使用**/@BeanpublicWebMvcConfigurercorsConfigurer() {
returnnewWebMvcConfigurerAdapter() {
@OverridepublicvoidaddCorsMappings(CorsRegistryregistry) {
registry.addMapping("/**")
                        .allowedHeaders("")
                        .allowedMethods("")
                        .allowCredentials(true)
                        .allowedOrigins("");
            }
        };
    }
}

4、访问方式

http://域名/后台方法 即可完成你的前后台交互功能,进行页面访问后台

当前项目还没有用到nginx技术,后期进行使用,等到用到nginx时便进行更新文档。

⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~


相关文章
|
3月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
155 1
|
3月前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
525 4
基于springboot+vue开发的会议预约管理系统
|
7月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
728 1
|
8月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
570 7
|
4月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
299 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
7月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
675 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
8月前
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
924 0
|
11月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
|
11月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
11月前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!