本文为原创​​​​​​​，只为互相学习！

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

支持:点赞收藏关注

社区:JAVA全栈进阶学习社区欢迎加入

目录

1、效果

​

2、域名

3、vue 跨域配置 

router.js路由 

 configjs

4、springboot →→→java代码跨域

5、访问方式

6、推荐博客 -  后台配置跨域的

1、效果

2、域名

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

3、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": "" }      }    }  }*/};

4、springboot →→→java代码跨域

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")@Configurationpublic class AxiosCorsConfig {/**生产环境不适用，开发环境使用**/@Bean    public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() {     @Override     public void addCorsMappings(CorsRegistry registry) {  registry.addMapping("/**")   .allowedHeaders("")   .allowedMethods("")   .allowCredentials(true)   .allowedOrigins("");     } };    }}

5、访问方式

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

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

6、推荐博客 -  后台配置跨域的

SpringBoot配置Cors解决跨域请求问题 - 袁老板 - 博客园

转载声明：本文为博主原创文章，未经博主允许不得转载

如果我的文章有帮助到您，欢迎打赏一下鼓励博主。