使用AngularJs和Keycloak進行HTTP請求中的身份驗證錯誤

我正在嘗試使用AngularJS和Keycloak創建一個用於學習目的的應用程序。使用AngularJs和Keycloak進行HTTP請求中的身份驗證錯誤

而且我遇到了我的HTML申請一些錯誤：

無法加載資源：服務器用）的401狀態（

XMLHttpRequest的迴應無法加載http://127.0.0.1:8081/customers。預檢的響應具有無效的HTTP狀態代碼401

我的問題是由應用程序提出的請求。 Postman提出的請求工作正常。

我的HTTP申請：

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

我的角度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; 
    } 
    }; 
});

從我所看到的，令牌被在頭部正確地發送。

如果有人能幫助我，我將不勝感激。

來源

2017-06-05 Joao Rosso

確保您的服務器上啓用了CORS，以允許客戶端進行跨域/跨端口請求。錯誤

XMLHttpRequest無法加載http://127.0.0.1:8081/customers。爲預檢響應具有無效的HTTP狀態代碼401

401是未授權的，預檢是OPTIONS請求瀏覽器發送時自動請求是使用AJAX，並從去到另一個域/端口的另一HTTP請求的前方正在進行呼叫的客戶端代碼。服務器只需要與適當的響應報頭允許客戶端獲得響應（它必須與相應的頭到OPTION請求做出響應）

https://enable-cors.org/

來源

2017-06-05 21:00:08 shaunhusain

是的，CORS在我的服務器上啓用了@CrossOrigin（origins =「*」） –

對後端應用keycloak.json文件添加"enable-cors":true 。

並添加此類。

@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() { 
    } 
}

來源

2017-06-09 05:24:58 boycod3

使用AngularJs和Keycloak進行HTTP請求中的身份驗證錯誤

回答

相關問題