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

本文涉及的产品
.cn 域名,1个 12个月
简介: 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://域名": "http://域名";

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://域名", //这个是你要访问得接口地址        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时便进行更新文档。

⚠️注意 ~

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

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

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


相关文章
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
137 1
|
16天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
94 62
|
1月前
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
318 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
14天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
32 2
|
14天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
38 2
|
16天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
22天前
|
存储 安全 Java
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建并配置 Spring Boot 项目,实现后端 API 和安全配置。接着,使用 Ant Design Pro Vue 脚手架创建前端项目,配置动态路由和菜单,并创建相应的页面组件。最后,通过具体实践心得,分享了版本兼容性、安全性、性能调优等注意事项,帮助读者快速搭建高效且易维护的应用框架。
39 3
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着,实现后端 API 以提供菜单数据。在前端部分,使用 Ant Design Pro Vue 脚手架创建项目,并配置动态路由和菜单。最后,启动前后端服务,实现高效、美观且功能强大的应用框架。
38 2
|
12天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
28 0