Я получаю "Ответ на ошибку Http для (неизвестный url): 0 Unknown Error" вместо фактического сообщения об ошибке в Angular

Я использую Angular 4 HttpClient для отправки запросов на внешнюю службу. Это очень стандартная настройка:

this.httpClient.get(url).subscribe(response => {
  //do something with response
}, err => {
  console.log(err.message);
}, () => {
  console.log('completed');
}

Проблема в том, что когда запрос не работает, я вижу общий Http failure response for (unknown url): 0 Unknown Error сообщение об Http failure response for (unknown url): 0 Unknown Error в консоли. Между тем, когда я проверяю неудавшийся запрос в chrome, я вижу, что статус ответа - 422, а на вкладке "Предварительный просмотр" я вижу фактическое сообщение о причине возникновения ошибки.

Как получить доступ к фактическому ответному сообщению, которое я вижу в инструментах хром-dev?

Вот скриншот, демонстрирующий проблему: enter image description here

ОТВЕТЫ

Ответ 1

Проблема была связана с CORS. Я заметил, что в консоли Chrome появилась еще одна ошибка:

В запрошенном ресурсе нет заголовка "Access-Control-Allow-Origin". Происхождение ' http://localhost: 4200 ', следовательно, не допускается. В ответе был код статуса 422.

Это означает, что ответ с сервера backend отсутствовал в заголовке Access-Control-Allow-Origin хотя backend nginx был настроен для добавления этих заголовков в ответы с директивой add_header.

Однако эта директива добавляет только заголовки, когда код ответа 20X или 30X. При ответах об ошибках заголовки отсутствовали. Мне нужно было always использовать параметр, чтобы убедиться, что заголовок добавлен независимо от кода ответа:

add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;

Когда бэкэнд был правильно настроен, я смог получить доступ к фактическому сообщению об ошибке в Угловом коде.

Ответ 2

работая для меня после отключения расширения блока объявлений в chrome, эта ошибка появляется иногда из-за того, что блокирует http в браузере

enter image description here

Ответ 3

В случае, если кто-то еще окажется потерянным, как я... Мои проблемы были не из-за CORS (у меня полный контроль над сервером (ами), и CORS был настроен правильно!).

Моя проблема заключалась в том, что я использую платформу Android уровня 28, которая по умолчанию отключает сетевые коммуникации в открытом тексте, и пыталась разработать приложение, которое указывает на IP моего ноутбука (на котором запущен сервер API). Базовый URL-адрес API выглядит примерно так: http://[LAPTOP_IP]: 8081. Поскольку это не https, Android WebView полностью блокирует сетевой переход между телефоном/эмулятором и сервером на моем ноутбуке. Чтобы это исправить:

Добавить конфигурацию безопасности сети

Новый файл в проекте: resources/android/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- Set application-wide security config -->
  <base-config cleartextTrafficPermitted="true"/>
</network-security-config>

ПРИМЕЧАНИЕ: Это следует использовать осторожно, так как оно разрешит весь открытый текст из вашего приложения (ничто не заставит использовать https). Вы можете ограничить его, если хотите.

Ссылка на конфигурацию в основном config.xml

<platform name="android">
    ...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <application android:networkSecurityConfig="@xml/network_security_config" />
    </edit-config>
    <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
    ....
</platform>

Вот оно! Оттуда я восстановил APK, и теперь приложение могло общаться как с эмулятора, так и с телефона.

Больше информации о сети сек: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

Ответ 4

Если вы, ребята, используете ядро .net, приведенное ниже, этот шаг может вам помочь!

Более того, это не Angular или другая ошибка запроса в вашем приложении FrontEnd

Сначала ребята должны добавить пакет Microsoft CORS от Nuget. Если ваши ребята не добавлены в ваше приложение, следуйте команде установки.

Install-Package Microsoft.AspNetCore.Cors

Затем вам нужно добавить службы CORS. В файле startup.cs в вашем методе ConfigureServices должно быть что-то похожее на следующее:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

Затем вам нужно добавить промежуточное программное обеспечение CORS в ваше приложение. В вашем startup.cs у вас должен быть метод Configure. Вы должны иметь это похоже на это:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
ILoggerFactory loggerFactory)
{
    app.UseCors( options => 
    options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    app.UseMvc();
}

Параметры lambda - это свободный API, поэтому вы можете добавлять/удалять любые дополнительные функции, которые вам нужны. На самом деле вы можете использовать опцию "AllowAnyOrigin", чтобы принять любой домен, но я настоятельно рекомендую вам не делать этого, так как он открывает вызовы из любого источника. Вы также можете ограничить вызовы из разных источников для их HTTP-метода (GET/PUT/POST и т.д.), Чтобы вы могли выставлять только вызовы GET между доменами и т.д.

Спасибо, ты сатиш (сел)

Ответ 5

Для меня это было вызвано серверной стороной JsonSerializerException.

Произошло необработанное исключение при выполнении запроса. Newtonsoft.Json.JsonSerializationException: обнаружен самоссылающийся цикл с типом...

Клиент сказал:

POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

Упрощение типа ответа за счет устранения петель решило проблему.

Ответ 6

Эта ошибка произошла для меня в Firefox, но не в Chrome при разработке локально, и это оказалось вызвано тем, что Firefox не доверял моему локальному сертификату API ssl (что неверно, но я добавил его в свой локальный магазин cert, который позволяет хром доверять ему, но не ff). Исправлена проблема с прямым доступом к API и добавлением исключения в Firefox.

Ответ 7

Если вы используете Laravel в качестве Backend, а затем отредактируйте файл.htaccess, просто вставив этот код, чтобы решить проблему CROS в вашем проекте Angular или IONIC

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

Ответ 8

Подобная ошибка может произойти, если вы не предоставили действительный сертификат клиента и токен, который понимает ваш сервер:

Ошибка:

Ответ об ошибке Http для (неизвестный url): 0 Неизвестная ошибка

Пример кода:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

class MyCls1 {

  constructor(private http: HttpClient) {
  }

  public myFunc(): void {

    let http: HttpClient;

    http.get(
      'https://www.example.com/mypage',
      {
        headers:
          new HttpHeaders(
            {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
              'MyClientCert': '',        // This is empty
              'MyToken': ''              // This is empty
            }
          )
      }
    ).pipe( map(res => res), catchError(err => throwError(err)) );
  }

}

Обратите внимание, что и MyClientCert & MyToken - это пустые строки, поэтому ошибка.
MyClientCert & MyToken может быть любым именем, которое понимает ваш сервер.

Ответ 9

Я использую ASP.NET SPA Extensions, который создает мне прокси на портах 5000 и 5001, которые проходят через Angular port 4200 во время разработки.

У меня была правильная настройка CORS для порта https 5001, и все было хорошо, но я случайно попал в старую закладку, которая была для порта 5000. Затем неожиданно это сообщение возникло. Как говорили другие в консоли, было сообщение об ошибке "предполетное".

Поэтому, независимо от вашей среды, если вы используете CORS, убедитесь, что у вас есть все порты, указанные в качестве хоста и порта.

Ответ 10

Я не так стара, как другие вопросы, но я просто боролся с этим в приложении Ionic-Laravel, и отсюда ничего не работает (и других сообщений), поэтому я установил https://github.com/barryvdh/laravel-cors дополнение в Laravel и начал, и он работает очень хорошо.

Ответ 11

Мой был вызван недействительными отношениями в моделях, которые я пытался запросить. Выяснилось, отлаживая ответ, который он разбил на отношение.

Ответ 12

Если у вас есть правильный заголовок cors. Ваша корпоративная сеть может быть отключена от заголовка cors. Если веб-сайт доступен извне, попробуйте получить доступ к нему из-за пределов сети, чтобы убедиться, что сеть вызывает эту проблему - хорошая идея, независимо от причины.

Ответ 13

Я получал это точное сообщение всякий раз, когда мои запросы занимали более 2 минут. Браузер отключится от запроса, но запрос на бэкэнде продолжался до его завершения. Сервер (в моем случае ASP.NET Web API) не обнаружил разрыв соединения.

После целого дня поиска я наконец-то нашел этот ответ, объяснив, что если вы используете конфигурацию прокси-сервера, по умолчанию время ожидания составляет 120 секунд (или 2 минуты).

Таким образом, вы можете отредактировать конфигурацию прокси и установить для нее все, что вам нужно:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "timeout": 6000000
  }
}

Теперь я использовал agentkeepalive, чтобы заставить его работать с проверкой подлинности NTLM, и не знал, что тайм-аут агента не имеет никакого отношения к тайм-ауту прокси, поэтому оба должны быть установлены. Мне потребовалось некоторое время, чтобы понять это, поэтому вот пример:

const Agent = require('agentkeepalive');

module.exports = {
    '/api/': {
        target: 'http://localhost:3000',
        secure: false,
        timeout: 6000000,          // <-- this is needed as well
        agent: new Agent({
            maxSockets: 100,
            keepAlive: true,
            maxFreeSockets: 10,
            keepAliveMsecs: 100000,
            timeout: 6000000,      // <-- this is for the agentkeepalive
            freeSocketTimeout: 90000
        }),
        onProxyRes: proxyRes => {
            let key = 'www-authenticate';
            proxyRes.headers[key] = proxyRes.headers[key] &&
                proxyRes.headers[key].split(',');
        }
    }
};

Ответ 14

Если вы используете Laravel в качестве Backend, а затем отредактируйте файл Controller в проекте laravel, просто вставив этот код в функцию конструктора, чтобы решить проблему CROS в вашем проекте Angular или IONIC

public function __construct(){
    header('Access-Control-Allow-Origin: *'); //just add this line
}

Ответ 15

Моя ошибка состояла в том, что файл был слишком большим (ядро dotnet, кажется, имеет ограничение @~ 25Mb). настройка

  • maxAllowedContentLength до 4294967295 (максимальное значение uint) в web.config
  • украшать действие контроллера с помощью [DisableRequestSizeLimit]
  • services.Configure(options => {options.MultipartBodyLengthLimit = 4294967295;}); в Startup.cs

решил проблему для меня.

Ответ 16

Ну, я испытал ту же ошибку, после поиска всех комментариев здесь, ничего не помогло. Наконец, выясняется, что мой сервер узлов не работал.