Spring Boot 应用程序与 Angular 应用程序的集成

Question

我想将 Spring Boot 应用程序与 Angular 应用程序集成。两个应用程序都在不同的服务器上运行。当我尝试从 Angular 应用程序 API 成功命中 REST API 但我在 UI 上收到错误响应时。

从源“http://localhost:4200”访问“http://localhost:9092/jobs/postal/launch”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

我在后端实现了 CORS 协商。所以我只希望我能够在没有任何安全性的情况下从 UI 访问后端。

我还阅读了以下文章以了解 CORS 和 CSRF。

https://markitzeroday.com/x-requested-with/cors/2017/06/29/csrf-mitigation-for-ajax-requests.html

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings( CorsRegistry registry) {
            registry.addMapping(corsMapping)
                .allowedOrigins(allowedOrigins)
                .allowedMethods(allowedMethods).allowedHeaders("X-Requested-With");
        }
    };
}

我只是想知道如何才能成功地将 Spring Boot 应用程序与 Angular 应用程序集成。

如果有任何文档或链接可以帮助我，请告诉我。

Answer 1

CORS 管理对源自后端应用程序部署位置以外的服务器的请求的访问。默认情况下，出于安全原因，它仅设置为后端托管服务器，这意味着只允许来自后端托管服务器的请求。

在您的情况下，由于后端和 UI 都在不同的服务器上运行，您需要在后端添加一些代码更改以允许 UI 访问后端。

你可以有一个类ResourceApplication.java如下图：

@RequestMapping("/")
@CrossOrigin(origins="*", maxAge=3600)
public Message home() {
  return new Message("Hello World");
}

以上内容来自 this 教程，该教程由 spring.io 提供，如果您将 spring-boot 与 angular 集成，它是一个很好的指南。如果向下滚动，您将找到 CORS 部分。