Question

我在端口4202中提供了角度应用程序，并通过以下代码连接至remove spring mvc应用程序。

this.http.post<Hero[]>('http://localhost:8080/api/hero/list', {"id":1}, httpOptions)

但是它报告了以下错误。

Failed to load http://localhost:8080/api/hero/list: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4202' is therefore not allowed access. The response had HTTP status code 403.

因此，我尝试通过控制器方法中的以下注释在我的spring Web应用中启用cors。

@CrossOrigin(origins = "http://localhost:4202")

我还尝试添加如下配置类。

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

然后我刷新前端用户界面，如下所示。

Failed to load http://localhost:8080/api/hero/list: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:4202, *', but only one is allowed. Origin 'http://localhost:4202' is therefore not allowed access.

然后我按如下所示检查了我的Chrome网络，它确实复制了“ Access-control-allow-origin”头。

然后我在Google上搜索了很多，发现其他人也遇到了这个问题，因为tomcat前面的其他Web服务器生成了第二个“ Access-control-allow-origin”头。但是我只有一台tomcat服务器，除了以“ ng serve ”开头的服务器。

然后，我尝试由提琴手而不是有角度的人直接访问此url（http://localhost:8080/api/hero/list）。下面是屏幕截图，我发现没有重复的“ Access-Control-Allow-Origin”。

所以我在猜测这是否是由angular启动的nodejs服务器引起的？由于我是新手，所以我不知道如何研究这个问题。谢谢。

Answer 1

您要在后端代码中添加两个标头，只需删除 @CrossOrigin(origins = "http://localhost:4202") 并仅保留 WebConfig 配置，因为您允许该配置中的所有来源。

Answer 2

Angular与Java应用程序服务器的起源不同，这就是为什么需要CORS的原因。我不是Spring专家，但据我了解您的问题，会发生以下情况：当您执行POST请求时，服务器会自行添加允许来源标头。它可能会阅读Endpoints方法规范以添加所需的允许的方法标头（至少在Java EE中）并设置allow origin *标头（我极力劝阻生产，最好设置预期的允许域）。由于您的Controller批注，因此设置了其他标头。 CORS specification只允许一个无效的cors原始标头包含一个值。通过将您的应用服务器配置为不设置任何内容，并通过一些批注处理此问题，确保仅设置一个，或者让应用服务器处理此问题，或者由负载均衡器设置此标头（如果使用的话）。第二件事（实际上是您遇到的最初错误）是预检请求。如果您执行的请求可能会更改服务器状态（例如发布请求），则cors要求您首先回答OPTIONS请求（以便浏览器可以在发送修改请求之前检查cors）。此选项请求必须具有200ish响应码，并提供原始和方法（包括您所用的情况下的发布）的cors allow标头。

对于本地开发，您还可以使用诸如this one之类的代理。这不会强迫您在本地处理cors并修改您的后端。

Answer 3

我也遇到了同样的问题。在我的情况下，我的后端服务器基于微服务架构（spring webflux）并且所有微服务都在更新跨源头，因此它有多个值，然后我通过将 cors 配置仅移动到网关来修复它，将其从所有其他微服务。这解决了我的问题！

Angular 7“ Access-Control-Allow-Origin”标头包含多个值

3 个答案: