侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

完美解决 Spring Boot + Vue Axios 跨域

2022-06-19 星期日 / 0 评论 / 0 点赞 / 65 阅读 / 3390 字

前言前后台分离开发模式越来越来成为主流,刚接触这种开发模式时,我们必定会遇到一个问题: 跨域。跨域产生跨域问题的罪魁祸首是浏览器同源策略,当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域

前言

前后台分离开发模式越来越来成为主流,刚接触这种开发模式时,我们必定会遇到一个问题: 跨域

跨域

产生跨域问题的罪魁祸首是浏览器同源策略,当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域,不同域之间的网络请求就会触发跨域问题。跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。

解决方法

前后台分离模式目前主流解决方案有三种:

  • webpack proxy:仅开发模式有效,打包后会失效。
  • cors:开发和生产环境都可以用。
  • nginx: 仅生产环境可用。

本文主要讲的是 cors 方式,需要前后台进行配合。

前台

前台使用 vue-admin-template 脚手架,网络请求使用 Axios。Axios 是一个基于 promise 的 HTTP 客户端,可以发送 get、post 请求。

.

找到项目中 Axios 封装的文件,在 Axios 创建时增加属性  withCredentials: true

.
    const service = axios.create({        baseURL:  process.env.VUE_APP_BASE_API,        withCredentials:  true,        timeout:  5000    })

后台

.

后台新建 WebMvcConfig 类,继承 WebMvcConfigurer,统一配置全局跨域请求。

.
@Configurationpublic class WebMvcConfig implements WebMvcConfigurer {        /**         *  允许跨域访问         */        @Override        public void addCorsMappings(CorsRegistry registry) {                  registry.addMapping("/**")  // 可限制哪个请求可以通过跨域                  .allowedHeaders("*")  // 可限制固定请求头可以通过跨域                  .allowedMethods("*") // 可限制固定methods可以通过跨域                  .allowedOrigins("*")  // 可限制访问ip可以通过跨域                  .allowCredentials(true) // 是否允许发送cookie                  .exposedHeaders(HttpHeaders.SET_COOKIE);          }          }

结尾

至此跨域问题算是解决了,这里是示例源码,希望可以帮助到你吧。

.
.

广告 广告

评论区