angular2请求中的自定义标头

Question

我有 2 个应用程序：

localhost:4200 <- angular2 app
localhost:8080 <- spring boot app with security

在我的 a2 auth.service 中，我尝试像这样登录：

const customHeaders = new Headers({
        'socialmedia-auth-token': 'ABCDEFGJ'
});
//...
      return this.http.post(loginpoint, JSON.stringify(worker), new RequestOptions({ headers: customHeaders, withCredentials: true }))
        .toPromise()
        .then(result => console.log(result))
        .catch(this.errorHandler);

我的 springboot cors 过滤器：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CORSFilter implements Filter {

private Logger log = Logger.getLogger(CORSFilter.class);

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
    
    
    log.info("####### CORS FILTER ###########");

    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;

    response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Expose-Headers", "socialmedia-auth-token");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, socialmedia-auth-token");

    chain.doFilter(req, res);
}

还有我的 AuthTokenFilter：

public class AuthTokenFilter extends UsernamePasswordAuthenticationFilter {

private static final String TOKEN_HEADER = "socialmedia-auth-token";

private Logger log = Logger.getLogger(AuthTokenFilter.class);

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain filter)
        throws IOException, ServletException {

    HttpServletRequest httpRequest = (HttpServletRequest) request;
    String authToken = httpRequest.getHeader(TOKEN_HEADER);
    
    log.info("####### AuthTokenFilter: " + authToken + " ###########");

问题在于 authToken 始终为空。 我尝试从 google-chrome 浏览器的 rest-client 扩展发送请求并且它有效（我只是添加到 headers from 单个标头：socialmedia-auth-token : asdfghhj）。我能够在我的 AuthTokenFilter 中接收 asdfghhj。

谷歌浏览器网络：There is no socialmedia-auth-token parameter

你能帮帮我吗？我不知道这段代码有什么问题。

解决方案

谢谢chaoluo。在 CORSFilter 我改变了

chain.doFilter

到

if(!request.getMethod().equals("OPTIONS")) {
        chain.doFilter(request, response);
}

它有效。谢谢。

Answer 1

当请求是 CORS 过滤器中的预检请求（Option 方法）时，您应该立即返回带有这些标头的 200。更多请参阅here（不那么简单的请求）。

if (request.getHeader("Access-Control-Allow-Origin") != null && "OPTIONS".equals(request.getMethod())) {
    // CORS "pre-flight" request
    return ;
}