Angular 5 - httpClient 未根据请求发送 headers

Question

我的 angular 应用程序正在向我的 zuul 服务发送 http 请求，我的问题是当我尝试发送授权 header 时，zuul 服务没有收到 header，这是 angular 代码：

obtenerAvisos() {
    const token = localStorage.getItem('token');
    const headers = new HttpHeaders(
      {
        'Content-Type':  'application/json',
        'Authorization': token
      }
    );

    return this.http.get(
      environment.url + environment.msavisos,
      {
        headers: headers
      }
    );
  }

在 zuul 上，我创建了一个预过滤器，我试图在那里捕获 header:

package com.filtro;

import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.web.client.HttpStatusCodeException;
import com.netflix.zuul.context.RequestContext;
import com.utilidades.JwtUtil;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.ExpiredJwtException;
import com.netflix.zuul.ZuulFilter;

public class PreFilter extends ZuulFilter {

    @Override
    public String filterType() {
        return "pre";
    }

    @Override
    public int filterOrder() {
        return 1;
    }

    @Override
    public boolean shouldFilter() {
        return true;
    }

    @Autowired
    private JwtUtil jwtUtil;

    @Override
    public Object run() {

        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();

        String ip = request.getLocalAddr();
        String authorization = request.getHeader("Authorization");
        String content = request.getHeader("Content-Type");
        System.out.println(content);
        try {
            if ( request.getRequestURL().toString().contains("/usuarios/sesion")) {

            } else if ( authorization != null ) {

                Claims claims = null;

                try {
                     claims = jwtUtil.parseToken(authorization);
                 } catch (ExpiredJwtException e) {
                     // Sesion expirada
                     ctx.unset();
                     ctx.setResponseStatusCode(HttpStatus.FORBIDDEN.value());
                 }

                if (claims != null) {
                    if (!JwtUtil.esIpCorrecta(claims, ip)) {
                        // Ip sin acceso
                        ctx.unset();
                        ctx.setResponseStatusCode(HttpStatus.FORBIDDEN.value());
                    } else {
                        // Acceso concedido
                        ctx.addZuulRequestHeader("authorization", jwtUtil.generateToken(claims, ip));
                    }
                } else {
                    // Token Invalido
                    ctx.unset();
                    ctx.setResponseStatusCode(HttpStatus.FORBIDDEN.value());
                }

            } else {
                ctx.unset();
                ctx.setResponseStatusCode(HttpStatus.FORBIDDEN.value());
            }

        }  catch (HttpStatusCodeException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

}

我使用邮递员发出请求并发送 header 并且一切正常，我已经看到 and this 但找不到答案，有人可以帮我解决这个问题吗？，提前致谢。

Answer 1

尝试将 'withCredentials' header 添加为真：

get(url) {
    return this.http.get(url, this.getHttpOptions());
}

getHttpOptions() {
    const token = localStorage.getItem('token');
    const headers = {
        'Content-Type':  'application/json',
        'Authorization': token
      }
    return { withCredentials: true, headers: headers };
}

Answer 2

你能试试吗:

return this.http.get(
  environment.url + environment.msavisos,
  {
    headers: new HttpHeaders().set('Authorization', localStorage.getItem('token'))
                              .set('Content-Type', 'application/json')
  }
);

Answer 3

最后问题出在zuul，我需要在我的主应用中添加一个cors配置：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.zuul.EnableZuulProxy;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import com.filtro.PostFilter;
import com.filtro.PreFilter;
import com.utilidades.JwtUtil;

@SpringBootApplication
@EnableZuulProxy
public class MsZuulApplication {

    public static void main(String[] args) {
        SpringApplication.run(MsZuulApplication.class, args);
    }

    @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);
    }

}

希望这对其他人有帮助:)

Angular 5 - httpClient 未根据请求发送 headers

Angular 5 - httpClient is not sending headers on request

netflix-zuul

angular