Я использую 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?
Вот скриншот, демонстрирующий проблему:
Ответ 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 в браузере
Ответ 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
Ну, я испытал ту же ошибку, после поиска всех комментариев здесь, ничего не помогло. Наконец, выясняется, что мой сервер узлов не работал.
Я использую 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
в консоли общее
сообщение. Между тем, когда я проверяю неудавшийся запрос в chrome, я вижу статус ответа 422, а на вкладке «предварительный просмотр» я вижу фактическую причину сбоя в сообщении.
Как мне получить доступ к фактическому ответному сообщению, которое я вижу в инструментах Chrome dev?
Вот скриншот, демонстрирующий проблему:
Ответы:
Проблема была связана с CORS . Я заметил, что в консоли Chrome произошла еще одна ошибка:
На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Происхождение « HTTP: // локальный: 4200 », следовательно , не имеет права доступа. Ответ имел код состояния HTTP 422.
Это означает, что в ответе внутреннего сервера отсутствовал Access-Control-Allow-Origin
заголовок, хотя серверный nginx был настроен на добавление этих заголовков в ответы с помощью add_header
директивы .
Однако эта директива добавляет заголовки только тогда, когда код ответа равен 20X или 30X. В сообщениях об ошибках отсутствовали заголовки. Мне нужно было использовать always
параметр, чтобы убедиться, что заголовок добавлен независимо от кода ответа:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
Как только бэкэнд был правильно настроен, я мог получить доступ к фактическому сообщению об ошибке в коде Angular.
В случае, если кто-то еще окажется таким же потерянным, как и я … Мои проблемы НЕ были связаны с CORS (я полностью контролирую сервер (ы), и CORS был настроен правильно!).
Моя проблема заключалась в том, что я использую платформу Android уровня 28, которая по умолчанию отключает сетевую связь в открытом виде, и я пытался разработать приложение, которое указывает на IP-адрес моего ноутбука (на котором запущен сервер API). Базовый URL-адрес API выглядит примерно так : http: // [LAPTOP_IP]: 8081 . Поскольку это не https , android webview полностью блокирует xfer сети между телефоном / эмулятором и сервером на моем ноутбуке. Чтобы это исправить:
Добавить конфигурацию сетевой безопасности
Новый файл в проекте: 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
работает для меня после отключения расширения блокировки рекламы в Chrome, эта ошибка иногда появляется из-за того, что что-то блокирует http в браузере
Если вы используете приложение .NET Core, это решение может помочь!
Более того, это может быть не ошибка Angular или другая ошибка запроса в вашем клиентском приложении.
Во-первых, вам нужно добавить пакет Microsoft CORS Nuget:
Install-Package Microsoft.AspNetCore.Cors
Затем вам нужно добавить службы CORS в файл startup.cs. В вашем методе ConfigureServices должно быть что-то похожее на следующее:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
}
Затем добавьте в свое приложение промежуточное ПО CORS. В вашем startup.cs у вас должен быть метод настройки. Вам нужно, чтобы это было примерно так:
public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
app.UseCors( options =>
options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseMvc();
}
Лямбда параметров — это удобный API, поэтому вы можете добавлять / удалять любые дополнительные параметры, которые вам нужны. Фактически вы можете использовать опцию «AllowAnyOrigin», чтобы принять любой домен, но я настоятельно рекомендую вам не делать этого, поскольку он открывает вызовы из разных источников от кого-либо. Вы также можете ограничить перекрестные вызовы источников их HTTP-методом (GET / PUT / POST и т. Д.), Чтобы вы могли только открывать перекрестные доменные вызовы GET и т. Д.
Эта ошибка возникала у меня в Firefox, но не в Chrome при локальной разработке, и оказалось, что Firefox не доверяет моему локальному сертификату ssl API (который недействителен, но я добавил его в свое локальное хранилище сертификатов, что позволило хром доверять ему но не ff). Непосредственный переход к API и добавление исключения в Firefox устранили проблему.
Для меня это было вызвано исключением 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, …}
Упрощение типа ответа за счет устранения петель решило проблему.
Если вы используете Laravel в качестве Backend, отредактируйте файл .htaccess, просто вставив этот код, чтобы решить проблему CROS в вашем проекте Angular или IONIC.
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Аналогичная ошибка может возникнуть, если вы не предоставили действующий сертификат клиента и токен, который понимает ваш сервер:
Ошибка:
Ответ об ошибке 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
может быть любым именем, понятным вашему серверу.
Я использую расширения ASP.NET SPA, которые создают мне прокси на портах 5000 и 5001, которые передаются на порт 4200 Angular во время разработки.
Я правильно настроил CORS для https-порта 5001, и все было в порядке, но я случайно перешел на старую закладку, которая была для порта 5000. Затем внезапно возникло это сообщение. Как другие говорили в консоли, появилось сообщение об ошибке «предполетная».
Итак, независимо от вашей среды, если вы используете CORS, убедитесь, что у вас указаны все порты — поскольку хост и порт имеют значение.
Я получал именно это сообщение всякий раз, когда выполнение моих запросов занимало более 2 минут. Браузер отключился от запроса, но запрос на серверной части продолжался, пока не был завершен. Сервер (в моем случае веб-API ASP.NET) не обнаружил разъединение.
После целого дня поиска я наконец нашел этот ответ , объяснив, что если вы используете конфигурацию прокси , у него по умолчанию тайм-аут 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(',');
}
}
};
Для меня это была проблема браузера, так как мои запросы нормально работали в Postman.
Оказывается, по какой-то причине Firefox и Chrome заблокировали запросы, идущие на порт 6000
, после того как я изменил порт API ASP.NET на 4000
, ошибка изменилась на известную ошибку CORS, которую я мог исправить.
Chrome по крайней мере показал мне, ERR_UNSAFE_PORT
что дало мне понять, что может быть не так.
Если у вас есть правильный заголовок cors. Возможно, в вашей корпоративной сети отсутствует заголовок cors. Если веб-сайт доступен извне, попробуйте получить к нему доступ из-за пределов своей сети, чтобы проверить, не вызывает ли сеть проблема — хорошая идея независимо от причины.
В ядре asp.net, если ваш контроллер api не имеет вызываемой аннотации [AllowAnonymous]
, добавьте ее над именем вашего контроллера, например
[ApiController]
[Route("api/")]
[AllowAnonymous]
public class TestController : ControllerBase
Не такой старый, как другие вопросы, но я просто боролся с этим в приложении Ionic-Laravel, и здесь ничего не работает (и другие сообщения), поэтому я установил дополнение https://github.com/barryvdh/laravel-cors в Laravel и запустился, и он работает очень хорошо.
Моя была вызвана недопустимыми отношениями в моделях, которые я пытался запросить. Выяснилось путем отладки ответа, что он разбился в отношении.
Для меня это не было проблемой. Было поле типа DateTime в БД, которое имеет значение (0000-00-00), и моя модель не может правильно привязать это свойство, поэтому я изменил на допустимое значение, например (2019-08-12).
Я использую ядро .net, OData v4 и MySql (коннектор EF pomelo)
Добавьте эти коды в файл подключения
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT,GET,POST,DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
Если это служба узла, попробуйте шаги, описанные здесь
По сути, это ошибка общего доступа к ресурсам (CORS). Подробнее о таких ошибках здесь .
Как только я обновил службу узлов, добавив следующие строки, все заработало:
let express = require("express");
let app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Моя ошибка заключалась в том, что файл был слишком большим (ядро dotnet, похоже, имеет ограничение @ ~ 25 МБ). настройка
- maxAllowedContentLength до 4294967295 (максимальное значение uint) в web.config
- украшение действия контроллера [DisableRequestSizeLimit]
- services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); в Startup.cs
решил проблему для меня.
Я использую 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?
Вот скриншот, демонстрирующий проблему:
Ответ 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 в браузере
Ответ 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
Ну, я испытал ту же ошибку, после поиска всех комментариев здесь, ничего не помогло. Наконец, выясняется, что мой сервер узлов не работал.
The problem was related to CORS. I noticed that there was another error in Chrome console:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 422.`
This means the response from backend server was missing Access-Control-Allow-Origin
header even though backend nginx was configured to add those headers to the responses with add_header
directive.
However, this directive only adds headers when response code is 20X or 30X. On error responses the headers were missing. I needed to use always
parameter to make sure header is added regardless of the response code:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
Once the backend was correctly configured I could access actual error message in Angular code.
answered Nov 14, 2017 at 21:06
grdlgrdl
3,5333 gold badges24 silver badges24 bronze badges
9
In case anyone else ends up as lost as I was… My issues were NOT due to CORS (I have full control of the server(s) and CORS was configured correctly!).
My issue was because I am using Android platform level 28 which disables cleartext network communications by default and I was trying to develop the app which points at my laptop’s IP (which is running the API server). The API base URL is something like http://[LAPTOP_IP]:8081. Since it’s not https, android webview completely blocks the network xfer between the phone/emulator and the server on my laptop. In order to fix this:
Add a network security config
New file in project: 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>
NOTE: This should be used carefully as it will allow all cleartext from your app (nothing forced to use https). You can restrict it further if you wish.
Reference the config in main 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>
That’s it! From there I rebuilt the APK and the app was now able to communicate from both the emulator and phone.
More info on network sec: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted
answered May 17, 2019 at 0:43
haggyhaggy
7226 silver badges11 bronze badges
5
working for me after turn off ads block extension in chrome, this error sometime appear because something that block http in browser
answered Aug 29, 2018 at 15:38
DwiyiDwiyi
6097 silver badges16 bronze badges
1
If you are using .NET Core application, this solution might help!
Moreover this might not be an Angular or other request error in your front end application
First, you have to add the Microsoft CORS Nuget package:
Install-Package Microsoft.AspNetCore.Cors
You then need to add the CORS services in your startup.cs. In your ConfigureServices method you should have something similar to the following:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
}
Next, add the CORS middleware to your app. In your startup.cs you should have a Configure method. You need to have it similar to this:
public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
app.UseCors( options =>
options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseMvc();
}
The options lambda is a fluent API so you can add/remove any extra options you need. You can actually use the option “AllowAnyOrigin” to accept any domain, but I highly recommend you do not do this as it opens up cross origin calls from anyone. You can also limit cross origin calls to their HTTP Method (GET/PUT/POST etc), so you can only expose GET calls cross domain etc.
Feasoron
3,4221 gold badge23 silver badges34 bronze badges
answered Mar 22, 2019 at 6:40
sathishsathish
2612 silver badges13 bronze badges
0
For me it was caused by a server side JsonSerializerException.
An unhandled exception has occurred while executing the request
Newtonsoft.Json.JsonSerializationException: Self referencing loop
detected with type …
The client said:
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Making the response type simpler by eliminating the loops solved the problem.
answered Feb 21, 2018 at 9:56
PerrierPerrier
2,7015 gold badges33 silver badges52 bronze badges
This error was occurring for me in Firefox but not Chrome while developing locally, and it turned out to be caused by Firefox not trusting my local API’s ssl certificate (which is not valid, but I had added it to my local cert store, which let chrome trust it but not ff). Navigating to the API directly and adding an exception in Firefox fixed the issue.
answered Apr 26, 2018 at 13:04
fraxfrax
4434 silver badges10 bronze badges
2
If this is a node service, try the steps outlined here
Basically, it’s a Cross-Origin Resource Sharing (CORS) error. More information about such errors here.
Once I updated my node service with the following lines it worked:
let express = require("express");
let app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
answered Feb 20, 2020 at 14:32
FistOfFuryFistOfFury
6,5277 gold badges48 silver badges57 bronze badges
1
A similar error can occur, when you didn’t give a valid client certificate and token that your server understands:
Error:
Http failure response for (unknown url): 0 Unknown Error
Example code:
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)) );
}
}
Note that both MyClientCert
& MyToken
are empty strings, hence the error.
MyClientCert
& MyToken
can be any name that your server understands.
answered Dec 5, 2018 at 12:54
4
I was getting that exact message whenever my requests took more than 2 minutes to finish. The browser would disconnect from the request, but the request on the backend continued until it was finished. The server (ASP.NET Web API in my case) wouldn’t detect the disconnect.
After an entire day searching, I finally found this answer, explaining that if you use the proxy config, it has a default timeout of 120 seconds (or 2 minutes).
So, you can edit your proxy configuration and set it to whatever you need:
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"timeout": 6000000
}
}
Now, I was using agentkeepalive to make it work with NTLM authentication, and didn’t know that the agent’s timeout has nothing to do with the proxy’s timeout, so both have to be set. It took me a while to realize that, so here’s an example:
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(',');
}
}
};
answered Sep 9, 2019 at 21:33
Marcos DimitrioMarcos Dimitrio
6,3885 gold badges37 silver badges60 bronze badges
I’m using ASP.NET SPA Extensions which creates me a proxy on ports 5000 and 5001 that pass through to Angular’s port 4200 during development.
I had had CORS correctly setup for https port 5001 and everything was fine, but I inadvertently went to an old bookmark which was for port 5000. Then suddenly this message arose. As others have said in the console there was a ‘preflight’ error message.
So regardless of your environment, if you’re using CORS make sure you have all ports specified — as the host and port both matter.
answered Dec 6, 2018 at 22:05
Simon_WeaverSimon_Weaver
136k79 gold badges631 silver badges676 bronze badges
For me it was a browser issue, since my requests were working fine in Postman.
Turns out that for some reason, Firefox and Chrome blocked requests going to port 6000
, once I changed the ASP.NET API port to 4000
, the error changed to a known CORS error which I could fix.
Chrome at least showed me ERR_UNSAFE_PORT
which gave me a clue about what could be wrong.
answered Mar 1, 2020 at 19:23
Shahin DohanShahin Dohan
5,7813 gold badges38 silver badges57 bronze badges
If you are using Laravel as your Backend, then edit your .htaccess file by just pasting this code, to solve problem CROS in your Angular or IONIC project
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
answered Feb 2, 2018 at 13:31
3
If you have a proper cors header in place. Your corporate network may be stripping off the cors header. If the website is externally accessible, try accessing it from outside your network to verify whether the network is causing the problem—a good idea regardless of the cause.
answered Nov 6, 2018 at 19:50
N-ateN-ate
5,5862 gold badges40 silver badges46 bronze badges
Add This Codes in your connection file
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT,GET,POST,DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
answered Jan 2, 2020 at 17:49
0
if you are using nodejs as backend, here are steps to follow
-
install cors in your backend app
npm install cors
-
Add this code
const cors = require('cors'); const express = require('express'); const expressApp = express(); expressApp.use(cors({ origin: ['http://localhost:4200'], "methods": "GET,PUT,POST", "preflightContinue": false, "optionsSuccessStatus": 204, credentials: true }));
answered Feb 14, 2021 at 17:59
YouBeeYouBee
1,91114 silver badges16 bronze badges
Is not as old as other questions, but I just struggled with this in an Ionic-Laravel app, and nothing works from here (and other posts), so I installed https://github.com/barryvdh/laravel-cors complement in Laravel and started and it works pretty well.
answered Aug 17, 2018 at 11:06
Mine was caused by an invalid relationship in the models I was trying to query. Figured out by debugging the response it crashed at the relation.
answered Sep 1, 2018 at 14:03
J.Kirk.J.Kirk.
9232 gold badges12 silver badges30 bronze badges
For me it wasn’t an angular problem. Was a field of type DateTime in the DB that has a value of (0000-00-00) and my model cannot bind that property correct so I changed to a valid value like (2019-08-12).
I’m using .net core, OData v4 and MySql (EF pomelo connector)
answered Nov 14, 2019 at 11:16
Luis LopezLuis Lopez
5311 gold badge13 silver badges28 bronze badges
In asp.net core, If your api controller doesn’t have annotation called [AllowAnonymous]
, add it to above your controller name like
[ApiController]
[Route("api/")]
[AllowAnonymous]
public class TestController : ControllerBase
answered Apr 15, 2020 at 11:55
dgncndgncn
495 bronze badges
1
You must use —port when serve server
ng serve —open —port 4200
export class DatabaseService {
baseUrl: String = "http://localhost:8080/";
constructor(private http: HttpClient) { }
saveTutorial(response) {
var fullUrl = this.baseUrl + "api/tutorials";
return this.http.post(fullUrl,response);
}
}
answered Nov 12, 2020 at 4:55
I had the same issue. I used grdl’s answer above and added a cors configuration to my server like the one below and the problem was solved.
{
"cors": [
{
"origin": [“*”],
"method": ["GET"],
"responseHeader": ["Content-Type"],
"maxAgeSeconds": 3600
}
]
}
Look at the specific cors config help for your server to see how to set it up.
answered Apr 28, 2022 at 7:40
KrithikaKrithika
1151 silver badge10 bronze badges
2022-07-13
This is the easiest way but DON’T with PROD.
Inside index.html, add or edit the existing <meta http-equiv="Content-Security-Policy" content="
. For example CORS blocked my access to local IIS Express https://localhost:44387/api/test
, solution is have this
<meta http-equiv="Content-Security-Policy" content="
...
connect-src 'self' https://localhost:44387 https://anysite.com ...">
answered Jul 13, 2022 at 18:25
Jeb50Jeb50
5,8966 gold badges41 silver badges77 bronze badges
Let do some simple ones:
a) Network is disconnected — zero byte response.
b) I get this when I cancel a http call (yes you can do that)
c) During start up when I move pages too quickly it will cancel http calls because angular has not hooked up properly. I locked page to stop this one occurring.
d) We had a proxy in the middle and it terminated the connection after 30 seconds rather sending a HTTP timeout packet. If you look at the .net logs on back end you will see a client disconnected message. (these are not unusual as a user may just close their browser)
All of these have happened to me and I have no idea how to separate out which cause it is for any specific failure.
answered Aug 19, 2022 at 2:13
KenFKenF
5244 silver badges14 bronze badges
answered Dec 7, 2022 at 7:34
SnaketecSnaketec
2331 silver badge12 bronze badges
My error was that the file was too large (dotnet core seems to have a limit @~25Mb). Setting
- maxAllowedContentLength to 4294967295 (max value of uint) in web.config
- decorating the controller action with [DisableRequestSizeLimit]
- services.Configure(options => { options.MultipartBodyLengthLimit = 4294967295; }); in Startup.cs
solved the problem for me.
answered May 23, 2019 at 14:35
SpikolynnSpikolynn
3,9832 gold badges37 silver badges44 bronze badges