Angular 2, Oauth2, CORS error : No 'Access-Control-Allow-Origin'

Question

Currently I try to make login using angular 2 to spring oauth2.

I get this error when click login in my angular:

XMLHttpRequest cannot load http://localhost:8080/REM/oauth/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Angular

login(username: string, password: string) {
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
headers.append('Accept', 'application/json');

let options = new RequestOptions({ headers: headers });

let params = new URLSearchParams();
params.append('grant_type', "password");  
params.append('client_id', "client");
params.append('client_secret', "secret");
params.append('username', "user");
params.append('password', "pass");                             

return this.http.post(this.urlLogin, params.toString(), options).map(this.extractData);}

CORS

<mvc:cors>
    <mvc:mapping path="/**" allowed-origins="http://localhost:3000, *"
        allowed-methods="POST, GET, PUT, DELETE"
        allowed-headers="X-Requested-With, Content-Type, X-Codingpedia,Authorization, Accept, Origin"
        allow-credentials="false" max-age="3600" />
</mvc:cors>

Kindly find full server configuration at: https://github.com/robbyrahmana/Config

Simply put, your server configuration is not set up correctly. If it were, you would not see the error. Make sure your CORS logic in the server is properly configured, try restarting the server, etc. — Lansana Camara
Hi @lansana, cors only not working when i tried to send oauth/token. If normal request, for example retrieve all user from server run OK. — Robby Rahmana
What is the difference from your two handlers then? If one works and one doesn't, then is the one that doesn't missing something? — Lansana Camara
Hi @Lansana, I upload my config here github.com/robbyrahmana/Config. can you please help to review. I know something wrong, but I cannot find, Thanks — Robby Rahmana
Unfortunately I don't know anything about Spring MVC, nor do I use Java. But my advice is just general advice. If it works in one place, but not in the other, then the other must having something wrong. Can you show the two variants (the one that works, the one that doesn't work) specifically? I don't know how to reason about all of those various config files as I've never used the framework. — Lansana Camara

ChenAn ChenAn · Accepted Answer · 2017-06-29T09:26:37

I user it in spring boot you can see that and make some differences

@Component

@Order(Ordered.HIGHEST_PRECEDENCE)

public class SimpleCORSFilter implements Filter {

@Override
public void init(FilterConfig fc) throws ServletException {
}

@Override
public void doFilter(ServletRequest req, ServletResponse resp,
                     FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) resp;
    HttpServletRequest request = (HttpServletRequest) req;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "PATCH,POST,GET,OPTIONS,DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN");

    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        chain.doFilter(req, resp);
    }

}

@Override
public void destroy() {
}

}

Angular 2, Oauth2, CORS error : No 'Access-Control-Allow-Origin'

1 Answers