angular2请求中的自定义标头

Question

I have 2 applications:

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

In my a2 auth.service I try to login like this:

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

My springboot cors filter:

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

And my 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 + " ###########");

The problem is that authToken is always null. I've tried to send request from rest-client extension for google-chrome browser and it works (i just add to headers from a single header: socialmedia-auth-token : asdfghhj). I was able to receive asdfghhj in my AuthTokenFilter.

Google Chrome network: There is no socialmedia-auth-token parameter

Can you help me ? I don't know what is wrong with this code.

Solution

Thank you chaoluo . In CORSFilter I changed

chain.doFilter

to

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

and it works. Thank you.

Answer 1

You should return 200 immediately with those headers when the request is preflight request ( Option method) in your CORS filter. More see here (not-so-simple requests).

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