ajax、angular 和 Zuul 的跨源问题

Question

我实现了 zuul 服务器，它可以路由到我所有的微服务。我在 angular 中有一个单独的 UI 项目。我正在尝试从 UI 应用程序向通过 Zuul 路由的特定微服务发出 AJAX 调用，但出现此错误。

XMLHttpRequest cannot load http://localhost:8006/user/v1/userassociations. 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:63342' is therefore not allowed access. The response had HTTP status code 403.

但是当我直接尝试在 http://localhost:4444/user/v1/userassociations 托管的本地主机中点击 api 时，它工作得很好。我将以下 CORS 配置添加到实际 api.

@Override
public void addCorsMappings(final CorsRegistry registry) {
    registry.addMapping("/**").allowedMethods("PUT", "GET", "DELETE", "OPTIONS", "PATCH", "POST");
}

只有当我尝试通过 zuul 访问 api 时才会出现问题我尝试向 Zuul 添加相同的配置，但它不起作用。

我知道这是同源问题，但我们的微服务应该有一个解决方案 public 这样任何人都可以从任何域发出请求。

下面是工作 AJAX 调用：- 如果我将 url 更改为 http://localhost:8006/user/v1/userassociations 这是通过 zuul 我得到交叉原点。

var service = {};
  service.userContextCall = function()
  {
    return $http({
      url:'http://localhost:4444/user/v1/userassociations',
      method: 'GET',
      headers: {'Content-Type':'application/json',
        'userContextId':'1234567890123456'}
    }).success(function(response){

      return response;
    }).error(function(error){

      return error;
    });

  };

  return service;

Header 当我通过 Zuul 点击 api 时收到的

Header。

Request URL:http://localhost:8006/user/v1/userassociations
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:[::1]:8006
Response Headers
view source
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Content-Length:20
Date:Tue, 23 Feb 2016 18:51:15 GMT
Server:Apache-Coyote/1.1
X-Application-Context:apigateway:8006
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, usercontextid
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8006
Origin:http://localhost:63342
Referer:http://localhost:63342/icpAccountHolder/app/index.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

Header 当我直接点击 api 工作时。

Request URL:http://localhost:4444/user/v1/userassociations
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:4444
Response Headers
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:63342
Content-Type:application/json;charset=utf-8
Date:Tue, 23 Feb 2016 18:54:19 GMT
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
Vary:Origin
X-Application-Context:userassociations-v1
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost:4444
Origin:http://localhost:63342
Referer:http://localhost:63342/icpAccountHolder/app/index.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36
userContextId:1234567890123456

谁能帮我解决这个问题。

Answer 1

修复似乎是使用 ANGEL.SR6 spring 云版本而不是 BRIXTON。但是如果你想使用 Brixton，这就是我写的用来覆盖 Zuul 中的 CORS 过滤器的内容。

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

ajax、angular 和 Zuul 的跨源问题

Cross origin issue with ajax, angular and Zuul

ajax

angularjs

microservices

spring-cloud

netflix-zuul