0


Vue+Axios+SpringBoot前后端分离项目解决跨域问题

什么是跨域?

不同服务器,不同项目,不同端口,满足以上三点任意一点的都是跨域请求

如何解决?

①前端

在Vue-Cli的核心配置文件main.js中,创建axios实例时允许使用凭证(Session)

/**
 * 导入axios
 */import axios from'axios';/**
 * 创建axios实例
 */let axiosInstance = axios.create({
  baseURL:'http://localhost/VueServe/',//设置服务端基础路径
  timeout:1000,//设置超时时间// `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials:true,// default =false  允许使用凭证
  headers:{'X-Requested-With':'XMLHttpRequest'}//设置请求头为Ajax请求});//设置axios实例对象为一个原型属性 ,注册为VUE的原型属性后就可以在VUE视图中使用‘this.属性名’来调用  $axios 为属性名Vue.prototype.$axios=axiosInstance;

②后端

可以单独写配置类,也可以在主启动类中进行编写

@SpringBootApplicationpublicclassVueServeApplication{publicstaticvoidmain(String[] args){SpringApplication.run(VueServeApplication.class, args);}@BeanpublicWebMvcConfigurerwebMvcConfigurer(){returnnewWebMvcConfigurer(){/**
             * 重写跨域映射,在其中进行跨域配置
             * @param registry  跨域注册器
             */@OverridepublicvoidaddCorsMappings(CorsRegistry registry){
                registry.addMapping("/testController/*")//指定当前项目中哪些资源可以跨域访问  /** 表示根目录下的所有目录 允许所有资源被访问.allowedMethods("*")//允许哪些请求方式可以跨越访问(GET/POST/DELETE/PUT) * 表示所有请求.allowCredentials(true)//是否允许使用凭证   session.allowedOrigins("http://localhost:8080");//允许哪些项目(资源)跨域访问本应用  此处指定的另一个项目的路径WebMvcConfigurer.super.addCorsMappings(registry);}};}}

本文转载自: https://blog.csdn.net/qq_45926912/article/details/122920916
版权归原作者 XuXinStu 所有, 如有侵权,请联系我们删除。

“Vue+Axios+SpringBoot前后端分离项目解决跨域问题”的评论:

还没有评论