Ответ на предпечатную проверку не имеет статуса HTTP ok в угловых

Question

В моем сервисе определен следующий запрос на получение:

createAuthorizationHeader(user, pass) {
  let headers: HttpHeaders = new HttpHeaders;
  headers = headers.append('Accept', 'application/json, text/plain, */*');
  headers = headers.append('Authorization', 'Basic ' + btoa(user + ':' + pass));
  headers = headers.append('Content-Type', 'application/json; charset=utf-8');
    console.log(headers);
    return this.http.get(this._loginUrl, {
      headers: headers
    });
}

Результат:

OPTIONS https://localhost:8443/delivery/all 401 ()

Failed to load https://localhost:8443/delivery/all: Response for preflight does not have HTTP ok status.

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

Я также сделал такой же почтовый запрос с почтальоном, но все работает, поэтому локальный сервер работает.

Я не могу понять, что я делаю не так с моей просьбой.

Answer 1

По умолчанию браузеры не позволяют пользователям выполнять перекрестный запрос.

Из Angular, чтобы избежать этой ошибки, мы можем использовать конфигурацию прокси.

Предположим, что угловой пользовательский интерфейс работает на localhost: 4200 и хочет вызвать URL-адрес конечной точки покоя, например: https://localhost:8443/delivery/all

Следующие шаги помогут решить эту проблему.

1. Создайте файл proxy.config.json в корневой папке вашего углового приложения. (Где существует файл package.json) Прокси-сервер просто берет запрос браузера на тот же домен + порт, на котором запускается ваше внешнее приложение, а затем перенаправляет этот запрос на ваш бэкэнд-сервер API. CORS - это проблема безопасности браузера, которая не применяется при обмене данными «от сервера к серверу», как в случае с прокси-сервером между ними.

   Содержание должно выглядеть следующим образом.

   Образец:

   {
       "/delivery/all/*": {
       "target": "https://localhost:8443",
       "secure": false,
       "logLevel": "debug",
       "changeOrigin": true
       }
   }
   

   Все запросы, сделанные к / delivery / all / ... из нашего приложения, будут перенаправлены на https://localhost:8443/delivery/all/

   Примечание: свойство changeOrigin. Вам определенно придется установить значение true, когда вы используете некоторые виртуальные прокси (например, настроенные с Apache2) на своем бэкэнде

2. Добавление конфигурации прокси при запуске приложения. Angular поддерживает «--proxy-config», где вы можете указать файл конфигурации прокси. Если вы используете опцию «npm start» для тестирования, вы должны добавить опцию «--proxy-config», как указано ниже. Он должен быть добавлен в файл package.json.

    "scripts": {
   
   "ng": "ng",
   "start": "ng serve --proxy-config proxy.config.json",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
   }
   

   Если вы работаете напрямую, используя "ng serve", оно будет изменено, как указано ниже. "ng serve --proxy-config proxy.config.json"

3. HTTP-вызов внутри нашего приложения Angular можно изменить на это. Сервер автоматически перенаправит запрос на "https://localhost:8443/delivery/all".

   this.http.get ( 'https://localhost:8443/delivery/all') .map (res => res.json ());

   до

   this.http.get ( '/ доставка / все') .map (res => res.json ());

вот ссылка для получения дополнительной информации: https://sudhasoftjava.wordpress.com/2018/10/05/proxy-configuration-in-angular/

Answer 2

@ Дэрил

Что мы сделали, так это добавили пользовательскую конфигурацию для Cors. А затем включите его через конфигурацию безопасности на сервере Java. Этот сервер был включен только для прямых вызовов REST, как описано в ответе.

@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                        .allowedHeaders("*");
            }
        };
    }
}

И это входит в конфигурацию веб-безопасности:

@Override
    protected void configure(final HttpSecurity http) throws Exception {
        http.csrf().disable()
                .antMatcher("/**")
                .authorizeRequests().and()
                .httpBasic()
                .and()
                .authorizeRequests().anyRequest().authenticated().and().cors();
    }

Answer 3

Договор CORS требует, чтобы аутентификация не требовалась по запросу перед полетом. Похоже, ваш сервер требует аутентификации по запросу OPTIONS и GET.

Когда вы входите в свой бэкэнд с Почтальоном, вы отправляете только GET. Браузер сначала отправит запрос OPTIONS (без вашего заголовка аутентификации) и ищет ответ с заголовком «Access-Control-Allow-Origin», который соответствует источнику страницы, выполняющей запрос.

Если ответ на ответ OPTIONS не является 2xx, или заголовок отсутствует, или значение заголовка не соответствует происхождению запрашивающей страницы, вы получите сообщение об ошибке, и запрос GET не будет сделано.

TLDR; измените свой сервер, чтобы не требовать аутентификации для метода OPTIONS при обработке URL-адреса входа в систему.