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

我有一个使用Zuul Netflix公司作为API网关的应用程序，该架构如下：如何使用CORS在Zuul工作作为API网关+ AngularJS +微服务

的架构做工精细，用浏览器和邮递员我可以从微服务（服务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); 
    }

浏览器控制台（铬）...

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也是一个春季启动应用程序，无论是在api网关中选择，还是使用@EnableZuulProxy注释来分开，这不是我想要的。

如果有人能提供帮助，请提前致谢。

来源

2016-12-04 imprezzeb

采用类似的架构，面临着类似的问题，我没有作以下修改和工作对我来说：

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请求我加了头，

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

为我工作。

我试图在原来的情况下，我只能访问在Zuul路由映射中映射的第一个URL。但在替换/ **之后*能够访问所有映射而没有问题，同样与Angular一样，所有的请求都应该包含头文件。我对这个问题也很陌生，可能稍后我会有更多的信息和细节，现在我可以说它对我有用，希望它也适用于你。

来源

2017-07-18 09:19:01

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

回答

相关问题