ANGULAR 10 Keycloak blocked by CORS policy

Question

I have my app in angular 10 and access by httpclient to keycloak EndPoint to access to my app, angular 10 code.

const data = {
  'username': username,
  'password': password
};
return this.httpClient.post(environment.loginOAUth, data);

Where environment.loginOAUth = keycloal is configured as:

• client-protocol:openid-connect
• type access: confidential
• Valid Redirect URIs: myAppURL and
• Web Origins: +

Error:

from origin 'myAppURL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I think the problem is in my angular code since I have tried anything from internet comments. Could you heo me ? Thank you in advance

Answer 1

The problem is not in your Angular app. To resolve it in localhost you can proxy your requestes with this configuration on package.json "ng serve":

ng serve --proxy-config=proxy.conf.json

And, in the proxy.conf.json put the redirect to that domain:

{
  "/auth": {
    "target": "http://keycloakcpath",
    "secure": true,
    "logLevel": "info",
    "changeOrigin": true
  }
}

Source: https://angular.io/guide/build#proxying-to-a-backend-server

Answer 2

I had the very same problem with Angular 10 in front with keycloak-angular 8.1.0/keycloak-js 12.0.4 and Spring Boot in the back. Try to add configuration to your backend. In my case this worked:

import java.util.Date;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;


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

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
            try {
                chain.doFilter(req, res);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("Pre-flight" + new Date().toString());
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "authorization, content-type," +
                "access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with");
            response.setStatus(HttpServletResponse.SC_OK);
        }

    }
}

Original answer post

Another even simplier

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class AppConfiguration implements WebMvcConfigurer {

    @Value("${server.frontendUrl}")
    protected String frontendUrl;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins(frontendUrl.split(",")).allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

Where server.frontendUrl value http://localhost:4200 is defined in application.properties