Authentifizierungsfehler in HTTP-Anforderungen mit AngularJs und Keycloak

Question

Ich versuche eine App für Studienzwecke mit AngularJS und Keycloak zu erstellen.

Und ich habe einige Fehler in meinen HTML Anforderungen erleben:

fehlgeschlagen Ressource laden: der Server mit einem Status von 401 reagiert()

XMLHttpRequest kann http://127.0.0.1:8081/customers nicht geladen werden. Antwort für Preflight hat ungültigen HTTP-Statuscode 401

Mein Problem ist in den Anforderungen von der App gemacht. Die Anfragen von Postman funktionieren gut.

Meine HTTP Banf:

$http({ 
    method: 'GET', 
    url: 'http://127.0.0.1:8081/customers' 
}).then(function success(response) { 
    console.log('success'); 
}, function error() { 
    console.log('error'); 
}); 

Mein Winkel configs:

app.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('BearerAuthInterceptor'); 
}]); 

app.factory('BearerAuthInterceptor', function() { 
    var token = window._keycloak.token; 

    return { 
    request: function (config) { 
     config.headers = config.headers || {}; 
     if (token) { 
     config.headers.Authorization = 'Bearer ' + token; 
     } 
     return config; 
    } 
    }; 
}); 

Von dem, was ich gesehen habe, wird das Token korrekt im Header gesendet werden.

Ich wäre dankbar, wenn mir jemand helfen könnte.

Answer 1

Stellen Sie sicher, dass auf Ihrem Server CORS aktiviert ist, damit der Client domänenübergreifende/Cross-Port-Anforderungen stellen kann. Der Fehler

XMLHttpRequest kann http://127.0.0.1:8081/customers nicht geladen werden. Antwort für Preflight hat ungültige HTTP-Statuscode 401

401 nicht autorisiert ist, Preflight ist die OPTIONS-Anforderung der Browser vor einem anderen HTTP-Anforderung sendet automatisch, wenn die Anforderung AJAX verwendet, und wird auf eine andere Domain/Hafen von der Client-Code, der den Anruf tätigt. Der Server nur mit den entsprechenden Header reagieren muss der Client zu ermöglichen, die Antwort zu bekommen (es hat mit den entsprechenden Header an die OPTION Anforderung reagieren)

https://enable-cors.org/

Answer 2

hinzufügen "enable-cors":true auf Back-End-Anwendung keycloak.json Datei .

Und fügen Sie diese Klasse auch hinzu.

@Component 
public class CORSFilter implements Filter { 
    static Logger logger = LoggerFactory.getLogger(CORSFilter.class); 

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

    @Override 
    public void doFilter(ServletRequest request, ServletResponse res, 
      FilterChain chain) throws IOException, ServletException { 
     HttpServletResponse response = (HttpServletResponse) res; 
     response.setHeader("Access-Control-Allow-Origin", "*"); 
     response.setHeader("Access-Control-Allow-Methods", "*"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "*"); 
     chain.doFilter(request, response); 
    } 

    public void destroy() { 
    } 
}