Ошибки аутентификации в HTTP-заявках с AngularJs и Keycloak

Question

Я пытаюсь создать приложение для учебных целей с AngularJS и Keycloak.

И у меня возникают некоторые ошибки в моих заявках HTML:

Не удалось загрузить ресурс: сервер ответил со статусом 401 ()

XMLHttpRequest не может загрузить http://127.0.0.1:8081/customers. Ответ на предпечатную проверку имеет недопустимый код состояния HTTP 401

Моя проблема в запросах, сделанных приложением. Запросы почтальона работают нормально.

Моя HTTP-заявка:

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

Мои угловые конфиги:

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;
    }
  };
});

Из того, что я увидел, токен отправляется в шапку правильно.

Буду благодарен, если кто-нибудь сможет мне помочь.

Answer 1

Добавлять "enable-cors":true в файле бэкэнд-приложения keycloak.json.

И добавить этот класс тоже.

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

Answer 2

Убедитесь, что на вашем сервере включен CORS, чтобы клиент мог отправлять запросы между доменами и кросс-портами. Ошибка

XMLHttpRequest не может загрузить http://127.0.0.1:8081/customers. Ответ на предпечатную проверку имеет недопустимый код состояния HTTP 401

401 не авторизован, предварительная проверка - это запрос ОПЦИИ, который браузер автоматически отправляет перед другим HTTP-запросом, когда запрос использует AJAX и отправляется в другой домен / порт из клиентского кода, который выполняет вызов. Сервер просто должен ответить соответствующими заголовками, чтобы позволить клиенту получить ответ (он должен ответить соответствующими заголовками на запрос OPTION)

https://enable-cors.org/