CORS Preflight request - Custom auth token in header - Spring and Angular 4

Question

I'm having trouble requesting a simple GET on my local server with a token as a header. My browser keep sending preflight request on simple GET request.

I tried with postman / curl and i don't have any issue.

Here's the actual code : Server (Spring) :

@Override
public void doFilter(final ServletRequest req, final ServletResponse res,
                     final FilterChain chain) throws IOException, ServletException {
    final HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods",
            "POST, GET, PUT, OPTIONS, DELETE, PATCH");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, x-auth-token, Content-Type");
    response.setHeader("Access-Control-Expose-Headers", "x-auth-token");
    response.setHeader("Access-Control-Allow-Credentials", "true");

    final HttpServletRequest request = (HttpServletRequest) req;

    if (request.getMethod().equals("OPTIONS")) {
        try {
            response.getWriter().print("OK");
            response.getWriter().flush();
        } catch (IOException e) {
            e.printStackTrace();
        }
    } else {
        chain.doFilter(request, response);
    }
}

So my x-auth-token here is a jwt-like token.

In my Angular code, I simply add my token as a x-auth-token like this :

getAll() {
    return this.http.get('http://127.0.0.1:8080/module', this.jwt()).map((response: Response) => response.json());
}

private jwt() {
    // create authorization header with jwt token
    let token = localStorage.getItem('user');
    let obj = JSON.parse(token)
    console.log(obj.token.token)
    if (obj.token) {
        let headers = new Headers({
            'x-auth-token': obj.token.token,
            'Content-Type': "application/json"
        });
        return new RequestOptions({ headers: headers });
    }
}

Note that my authentication / signup routes work fine, i'm only having trouble communicating my x-auth-token header to my Spring server.

Both my webserver are running locally : Spring on 8080 and Angular on 8000.

Any help would be greatly appreciated,

Thank you,

user_630372 · Answer

First, postman and curl are not good ways to test for CORS, since they don't enforce the same origin policies as standard browsers do. They will work even in cases that will fail in the browser.

Second, the reason your request is pre-flighted by the browser is that it is not a simple request, because of the x-auth-token header and the application/json Content-Type. Only application/x-www-form-urlencoded multipart/form-data and text/plain content-types are allowed in simple requests.

I would assume that the problem is in the OPTION response. Make sure that it includes all the relevant headers. It might be possible it is failing or that you are loosing the added headers because you are handling it differently than other responses.

CORS Preflight request - Custom auth token in header - Spring and Angular 4

1 Answers