VUE的proxyTable使用记录和java跨域设置

最新推荐文章于 2024-09-27 16:34:20 发布

原创最新推荐文章于 2024-09-27 16:34:20 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在webpack开发环境中临时解决跨域问题，通过proxyTable配置，并对比了Java后端两种常用的CORS设置方法。发布后需配合后端调整，强调了allowCredentials的注意事项。

记一次前端解决跨域：

在webpack的dev节点中找到proxyTable，设置如下

    proxyTable: {
      '/': {
        target: 'http://localhost:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/': '/'
        }
      }
    },

即可解决本地的跨域问题，但是发布之后是不生效的，只能通过后台设置或者使用nginx把前端端弄成同一个域名（主要还是后台！！）

java跨域设置如下：

方法一：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(corsList) // corsList可在application中配置，若allowCredentials为true，这里不能设置为*，否则不生效
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowCredentials(true)
                .maxAge(3600);   
    }
}

方法二：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        // 添加多个跨域
        for (String corsStr : corsList) {
            corsConfiguration.addAllowedOrigin(corsStr);
        }

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }  
}

一定要记住allowCredentials为true的时候不能配置所有，一定要一个个加上！！