如何实现前端和后台之间的数据交换

大浪淘沙胡

于 2019-01-21 16:34:52 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：服务器软件开发 Vue Web 文章标签：前端和后台端口配置

本文链接：https://blog.csdn.net/qq_27474555/article/details/86577726

Vue Web 同时被 2 个专栏收录

54 篇文章

订阅专栏

服务器软件开发

38 篇文章

订阅专栏

本文介绍如何解决前端Vue项目与后端Java服务之间的跨域问题，通过配置Vue代理和Java CORS策略实现跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 对vue项目进行配置（前端以Vue为例）
config/index.js中配置
proxyTable: {
'/user':{
target:'http://127.0.0.1:9001',
pathRewrite:{
'^/user':''
}
}
},
2、对后台添加CorsConfig（后台以java为例）
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 允许任何头
corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
corsConfiguration.setAllowCredentials(true);

return corsConfiguration;
}

@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}