«Http error response для (неизвестного URL): 0 неизвестная ошибка» мобильного устройства - PullRequest
Новая
       11

«Http error response для (неизвестного URL): 0 неизвестная ошибка» мобильного устройства

0 голосов
/ 17 января 2019

У меня проблема с CORS в моем проекте Angular 6 / Symfony 4. Этот проект имеет модуль входа / регистрации. Я использую FOSUserBundle и по умолчанию включен false. Затем я отправляю электронное письмо со ссылкой для подтверждения (https://subdomain.example.com/confirm-email/CONFIRMATION_TOKEN)), чтобы убедиться, что это не бот. Ссылка перенаправляет на специальную страницу в Angular, которая ставит учетную запись пользователя, чтобы включить ее. Дело в том, что на ноутбуке с любым браузером все работает нормально, но когда я хочу сделать это с моим телефоном, ничего не добавляется. Я попытался предупредить об ошибке и получил следующее: 

{"headers":{"normalizedNames":{}, "lazyUpdate":null,"headers": {}},"status":0,"statusText":"UnknownError","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}

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

Вот несколько примеров:

Symfony, .env 

CORS_ALLOW_ORIGIN=^https://subdomain.example.com$

Symfony, nelmio_cors.yaml 

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        max_age: 3600
    paths:
        '^/': ~

Angular, login.service.ts 

async confirmUser(confirmToken: string): Promise<any> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json; charset=UTF-8'
        })
    };

    return await this.http.post(`${this.url}/user/${confirmToken}`, httpOptions).toPromise();
}

Угловой, verify-user.component.ts 

async confirmUser() {
    try {
      await this.loginService.confirmUser(this.confirmToken);
      setTimeout(() => {
        window.location.href = 'https://example.com/';
      }, 1000);
    } catch (error) {
      swal({
        type: 'error',
        title: 'Oops...',
        text: error.statusText,
        showConfirmButton: false,
        showCancelButton: false,
        timer: 2000
      });
    }
}

Я действительно не знаю, в чем проблема и почему она не работает на мобильном устройстве, хотя она отлично работает с ноутбуком. Я использую Browserstack для тестирования на нескольких устройствах (iOS, Android). То же самое с моим мобильным телефоном (iOS12) с Safari и Chrome.

К вашему сведению, эти два проекта находятся на одном сервере, но с двумя разными URL. Например: subdomain.example.com и subdomain-api.example.com

Если кто-то когда-либо сталкивался с этим и нашел решение, пожалуйста, будьте моим гостем.

РЕДАКТИРОВАТЬ 1

Спасибо sideshowbarker за удаление моего тега cors, при проверке вашего профиля я увидел один из ваших ответов и попробовал "Как использовать прокси-сервер CORS, чтобы обойти" Нет доступа. Control-Allow-Origin метод заголовка "проблемы". И это работает для запроса OPTIONS, но не для POST (изображение: https://imgur.com/0WkeYlQ). И для этого у меня есть, возможно, решение: мой технический директор заблокировал IP-доступ к API. Мы разрешаем только example.com, поддомен. example.com и IP от нашей компании. Так что, я думаю, мы должны разрешить https://cors -anywhere.herokuapp.com / IP, но есть ли другая альтернатива?

1 Ответ

0 голосов
/ 18 января 2019

Я не думаю, это проблема CORS, которая обычно отображается как сообщение об ошибке, относящейся к CORS, что-то вроде «Нет заголовка ответа Access-Control-Allow-Origin».

Можете ли вы предоставить полный набор заголовков ответа и для неудачного запроса?

...