202206-2|VUE[axios跨域]+SpringBoot发布到线上方法
【摘要】 主页：小王叔叔的博客支持:点赞👍关注✔️收藏💖1、域名通过内网穿透工具进行指定本地ip 作为域名，我用的是 https://natapp.cn 比较好用，2、vue 跨域配置前端页面中，在vue的main.js中使用axis实现跨域，路由进行配置前端vue组件的访问路径，main.js/** 测试服务器用，并且开启springboot的拦截器AxiosCorsConfig类中文件 **/...
主页：小王叔叔的博客
支持:点赞👍关注✔️收藏💖
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路由
export default new Router({
mode: "history",
//base: process.env.BASE_URL, /**开发环境使用**/
base: "/bjxvue/",/**配置前台访问的路径**/
routes: [
{
path: "/",
name: " ",
component: shopindex
},
.........
{
path: "/shopindex",
name: "shopindex",
component: shopindex
}
]
});configjs
const path = 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
package com.free.single.tools;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SuppressWarnings("all")
@Configuration
public class AxiosCorsConfig {
/**生产环境不适用，开发环境使用**/
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("")
.allowedMethods("")
.allowCredentials(true)
.allowedOrigins("");
}
};
}
}4、访问方式
http://域名/后台方法 即可完成你的前后台交互功能，进行页面访问后台
当前项目还没有用到nginx技术，后期进行使用，等到用到nginx时便进行更新文档。
⚠️注意 ~
💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！
如有疑问❓可以在评论区💬或私信💬，尽我最大能力🏃♀️帮大家解决👨🏫！
如果我的文章有帮助到您，欢迎点赞+关注✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）