Spring Boot，Angular2，跨域答案

【问题标题】：Spring Boot, Angular2, Cross-originSpring Boot，Angular2，跨域
【发布时间】：2017-06-06 05:11:25
【问题描述】：

我在 Spring Boot 中有一个 Web 服务器。我可以向它发送 HTTP 请求，并从 Send HTTP 等工具中获得答案。我也有一个基于 Angular2 whoich 的网站。部分功能必须包括从 Chrome 中运行的 Angular2 到 Spring Boot 服务器的 HTTP 请求。每次我这样做时，Chrome 控制台都会出错：

XMLHttpRequest 无法加载“URL 服务器”。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'URL Client' 不允许访问。

我在所有有意义的地方都放入了 Spring 服务器 @CrossOrigin：在 @Controller、@RequestMapping、@GetMapping 之前，但它没有帮助。我缺少什么以及如何克服？非常感谢，有点绝望，Levi

【问题讨论】：

标签： spring-mvc angular cross-domain

【解决方案1】：

@Bean
   public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            CorsConfiguration config = new CorsConfiguration();
            config.setAllowCredentials(true);
            config.addAllowedOrigin("*");
            config.addAllowedHeader("*");
            config.addAllowedMethod("OPTIONS");
            config.addAllowedMethod("GET");
            config.addAllowedMethod("POST");
            config.addAllowedMethod("PUT");
            config.addAllowedMethod("DELETE");
            source.registerCorsConfiguration("/**", config);
            return new CorsFilter(source);
        }

试试这个对我有用！

【讨论】：

【解决方案2】：

您需要为您的应用程序添加 CQRSFilter 并在您的 Spring Boot 配置类中设置该 CORSFilter。

你要做的是

1> 创建您自己的实现过滤器的 CQRSFilter

2>您应该在过滤器中添加如下代码

@Component
public class CORSFilter implements Filter{
static Logger logger = LoggerFactory.getLogger(CORSFilter.class);

@Override
public void init(FilterConfig filterConfig) throws ServletException {
}

@Override
public void doFilter(ServletRequest request, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
    chain.doFilter(request, response);
}

public void destroy() {}
}

3> 将你的过滤器放在 spring 配置文件中

@EnableWebMvcSecurity
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {



@Override
protected void configure(HttpSecurity http) throws Exception {
  http
      .addFilterBefore(new CORSFilter(), ChannelProcessingFilter.class)

  }
 }

【讨论】：

您的答案似乎很有希望，因为缺少的是标题。谢谢，但是请您添加一些详细信息吗？我不明白我在哪里写response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");还有哪个spring配置文件的意思，抱歉这么密集。
我已经添加了一些相关代码。如果需要，您需要添加自己的附加配置。如果你觉得它有帮助，请接受它:)

【解决方案3】：

尝试如下：

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("<<MAPPING>>").allowedOrigins("<<ORIGINS>>");
            }
        };
    }

如果仍然无法正常工作，请阅读以下教程并尝试使用替代选项：

https://spring.io/guides/gs/rest-service-cors/

更新 1：

由@Levi 更新

    import org.springframework.web.cors.CorsConfiguration; //+ more public class RestConfiguration { 

    @Bean public CorsFilter corsFilter() { 

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); 
    config.setAllowCredentials(true);
     config.addAllowedOrigin("*"); 
    config.addAllowedHeader("*"); 
    config.addAllowedMethod("*"); 
    source.registerCorsConfiguration("/**", config);
     return new CorsFilter(source); } 

}

【讨论】：

我尝试了手册中出现的所有内容以及您的建议，但仍然存在问题。
以下成功：import org.springframework.web.cors.CorsConfiguration; //+ more public class RestConfiguration { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }

【解决方案4】：

您需要按照here 的描述设置一个代理到后端。

1) 使用内容创建文件 proxy.conf.json（在 package.json 旁边）

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

2) 编辑 package.json 中的启动脚本

"start": "ng serve --proxy-config proxy.conf.json"

3) 使用

运行

npm start

【讨论】：