springboor与vue的跨域问题

参考：https://blog.csdn.net/jxysgzs/article/details/110818712

axios的引入

我们要引入axios可以到axios官网进行引入。不过本人在按照官网npm安装后：

//安装的dos命令
npm install axios

在vue浏览器界面刷新还是会出现axios没有定义的错。我的解决方案是：
输入此命令即可解决axios没有定义的错

vue add axios

跨域

在我们成功引入axios后写入方法：这个是我直接从axios的官网拿的

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在页面刷新报No ‘Access-Control-Allow-Origin’ header is present on the requested resource.的错，而我们看到has been blocked by CORS policy就知道这是跨域问题
解决的方案是：创建一个config配置类，此类实现WebMvcConfigurer并重写
addCorsMappings方法

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOrigins("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }

}

版本

如果你springboot的版本低于2.4.0，那么用上述方法解决跨域是没有问题的，但如果springboot版本是2.4.0那么使用上述方法还是会报一个：When allowCredentials is true, allowedOrigins cannot contain the special val的错。解决方案是参考：https://blog.csdn.net/jxysgzs/article/details/110818712
解决的，把方法内的allowedOrigins改为allowedOriginPatterns，如下：

//@Configuration
public class CrosConfig implements WebMvcConfigurer {
//    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}