java - 如何在 Zuul 中使用 CORS 作为 API 网关 + AngularJS + 微服务

Question

我有一个使用 Zuul Netflix 作为 API 网关的应用程序，架构如下:

架构运行良好，使用浏览器和 postman 我可以从微服务(服务 1、2 和 3)访问不同的 REST 端点。但是当我尝试在我的前端 Web 应用程序 (AngularJS WebApp) 中使用它时，它在 chrome 控制台中出现以下错误。

XMLHttpRequest cannot load http://localhost:8080/person/api/all. Response for preflight is invalid (redirect)

如果我设置 @CrossOrigin 注释，则可以通过其自己的地址和端口使用该服务。但是，当通过网关访问它时，其余端点上没有 @CrossOrigin 注释将不起作用。

尝试在我的安全配置中创建以下过滤器，但仍然无效，而是在 chrome 控制台中出现以下错误。

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

浏览器控制台(Chrome)...

XMLHttpRequest cannot load http://localhost:8080/person/api/all. Redirect from 'http://localhost:80/person/api/all' to 'http://localhost:80' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.

下面是示例 AngularJS HTTP 请求。

app.controller('loginCtrl', [
    '$scope', '$http', function($scope, $http) {

      $http.get('http://localhost:8080/person/api/all').then(function(data) {
        return console.log(data.data);
      });
]); 

有人知道怎么处理吗？这里和那里有很多教程，但他们的 webapp 也是一个 spring boot 应用程序，要么位于 api 网关中，要么与 @EnableZuulProxy 注释分开，这不是我想要的。

如果有人可以提供帮助，在此先感谢。

Answer 1

使用类似的架构，遇到类似的问题，我做了以下更改并为我工作:

config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config);

到

config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("*", config);

并且在我的角度 http 请求中添加了 header ，

{'Access-Control-Allow-Origin':'*'}

为我工作。

我试图在最初的情况下只能访问 Zuul 路由映射中映射的第一个 URL。但是在用 * 替换/** 之后能够毫无问题地访问所有映射，Angular 方面也一样，所有请求都应该包含 header 。我也是这个问题的新手，也许我稍后会有更多信息和细节，现在我可以说它对我有用，希望它也对你有用。