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时便进行更新文档。

⚠️注意 ~

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

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

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


相关文章
|
4月前
封装axios的get、post方法
本文介绍了如何封装axios的get和post方法,并展示了具体的代码实现,包括使用axios创建实例、设置请求拦截器以及定义get和post函数。
151 2
|
5月前
|
Java 开发者 Spring
【SpringBoot 异步魔法】@Async 注解:揭秘 SpringBoot 中异步方法的终极奥秘!
【8月更文挑战第25天】异步编程对于提升软件应用的性能至关重要,尤其是在高并发环境下。Spring Boot 通过 `@Async` 注解简化了异步方法的实现。本文详细介绍了 `@Async` 的基本用法及配置步骤,并提供了示例代码展示如何在 Spring Boot 项目中创建与管理异步任务,包括自定义线程池、使用 `CompletableFuture` 处理结果及异常情况,帮助开发者更好地理解和运用这一关键特性。
340 1
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
88 2
|
2月前
|
前端开发 安全 Java
springboot解决跨域问题
跨域问题指前端调用与后端接口不在同一域名或端口时产生的安全限制。本文介绍两种在Spring Boot中解决跨域问题的方法:一是通过配置CorsFilter,二是实现WebMvcConfigurer接口。配置完成后重启项目即可生效。作者:博笙困了。来源:稀土掘金。
|
2月前
|
安全 JavaScript Java
SpringBoot解决跨域最佳实践
本文介绍了跨域问题的起因及最佳实践,重点讲解了SpringBoot中如何利用`CorsFilter`解决跨域问题。首先解释了由于浏览器的同源策略限制导致的跨域现象,然后提出了在服务端入口处解决跨域问题的建议,最后详细展示了三种SpringBoot中配置跨域的方法:使用默认配置、自定义配置规则以及通过配置文件管理跨域设置,以适应不同的应用场景。
|
2月前
|
前端开发 安全 JavaScript
SpringBoot 如何解决跨域问题?
本文深入探讨了Spring Boot解决跨域问题的方法,包括全局配置CORS、使用@CrossOrigin注解和自定义过滤器,提供了详细的代码示例和分析,帮助开发者有效应对Web开发中的跨域挑战。
|
3月前
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
421 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
62 2
|
3月前
|
存储 安全 Java