springboot跨域and Vue-cli中跨域解决方案

问题

 跨域这个问题多出现在前后端分离项目中,至于为什么会有这个问题,网络上已经有很多详细的文章了,这里就不做过多的阐述。

 本片文章分两个部分进行,一是通过springboot中实现配置类来解决问题;二是在vue-cli项目中通过代理的方式来解决。

在springboot项目中配置跨域

创建一个实现WebMvcConfigurer的类
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

 /**
     *  配置跨域
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //允许所有域名的访问
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT","OPTIONS")
                .maxAge(3600).allowCredentials(true);
//        registry.allowCredentials(true);
        //设置是否允许客户端发送cookie信息。默认是false
    }
}

重写addCorsMappings方法,该方法用于配置Cors跨域信息

  • addMapping:表示允许所有请求路径
  • allowedHeaders:允许任何请求头
  • allowedOrigins:允许任何域名的访问
  • allowCredentials: 是否允许证书,不在默认开启

 以上就是在后端中进行配置,可以减轻前端的工作量

在vue-cli前端项目中配置跨域

配置vue.config.js文件(没有就创建)
module.exports = {
	publicPath: './',
	devServer: {
		port: 9099,
		https: false,
		hotOnly: false,
		// proxy: {
		// 	"/apis": {
		// 		target: "http://localhost:8090", // 要请求的后台地址
		// 		ws: true, // 启用websockets
		// 		changeOrigin: true, // 是否跨域
		// 		pathRewrite: {
		// 			"^/apis": "" // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替
		// 		}
		// 	}
		// },
		// before: app => {}
	}
}

 配置如上信息后,当我们请求路径比如:

/apis/v1/demo

 代理为:

http://localhost:8090/v1/demo

 也就是说apis被转换为http://localhost:8090

注意:配置完vue.config.js文件后又时发现没有效果,建议重启一下项目,很有用的

 以上就是关于vue-cli项目中跨域的解决方案。

# springboot  vue 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×