Tôi nhận được “Phản hồi lỗi Http cho (url không xác định): 0 Lỗi không xác định” thay vì thông báo lỗi thực tế trong Angular

Tôi đang sử dụng Angular 4 HttpClientđể gửi yêu cầu đến dịch vụ bên ngoài. Đó là một thiết lập rất chuẩn:

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

Vấn đề là, khi yêu cầu không thành công, tôi thấy một Http failure response for (unknown url): 0 Unknown Errorthông báo chung trong bảng điều khiển. Trong khi đó, khi kiểm tra yêu cầu không thành công trong chrome, tôi có thể thấy trạng thái phản hồi là 422 và trong tab "xem trước", tôi thấy thông báo thực tế mô tả nguyên nhân thất bại.

Làm cách nào để truy cập thông báo phản hồi thực tế mà tôi có thể thấy trong các công cụ dành cho nhà phát triển chrome?

Đây là ảnh chụp màn hình chứng minh sự cố:

Vấn đề liên quan đến CORS . Tôi nhận thấy rằng có một lỗi khác trong bảng điều khiển Chrome:

Không có tiêu đề 'Access-Control-Allow-Origin' có trên tài nguyên được yêu cầu. Nguồn gốc ' http: // localhost: 4200 ' do đó không được phép truy cập. Phản hồi có mã trạng thái HTTP 422. '

Điều này có nghĩa là phản hồi từ máy chủ phụ trợ bị thiếu Access-Control-Allow-Origintiêu đề mặc dù nginx phụ trợ đã được định cấu hình để thêm các tiêu đề đó vào các phản hồi có add_headerchỉ thị .

Tuy nhiên, chỉ thị này chỉ thêm tiêu đề khi mã phản hồi là 20X hoặc 30X. Khi phản hồi lỗi, các tiêu đề bị thiếu. Tôi cần sử dụng alwaystham số để đảm bảo rằng tiêu đề được thêm vào bất kể mã phản hồi:

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

Sau khi chương trình phụ trợ được định cấu hình chính xác, tôi có thể truy cập thông báo lỗi thực tế trong mã Angular.

Trong trường hợp bất kỳ ai khác kết thúc như tôi đã mất ... Vấn đề của tôi KHÔNG phải do CORS (Tôi có toàn quyền kiểm soát (các) máy chủ và CORS đã được định cấu hình chính xác!).

Vấn đề của tôi là do tôi đang sử dụng nền tảng Android cấp độ 28, tính năng này sẽ tắt truyền thông mạng văn bản rõ ràng theo mặc định và tôi đang cố gắng phát triển ứng dụng trỏ đến IP máy tính xách tay của tôi (đang chạy máy chủ API). URL cơ sở của API giống như http: // [LAPTOP_IP]: 8081 . Vì không phải https , nên webview android chặn hoàn toàn mạng xfer giữa điện thoại / trình giả lập và máy chủ trên máy tính xách tay của tôi. Để khắc phục điều này:

Thêm cấu hình bảo mật mạng

Tệp mới trong dự án: 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>

LƯU Ý: Điều này nên được sử dụng cẩn thận vì nó sẽ cho phép tất cả văn bản rõ ràng từ ứng dụng của bạn (không có gì buộc phải sử dụng https). Bạn có thể hạn chế nó hơn nữa nếu bạn muốn.

Tham khảo cấu hình trong config.xml chính

<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>

Đó là nó! Từ đó, tôi đã xây dựng lại APK và ứng dụng hiện có thể giao tiếp từ cả trình giả lập và điện thoại.

Thông tin thêm về giây mạng: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPeriled

làm việc cho tôi sau khi tắt tiện ích chặn quảng cáo trong chrome, lỗi này đôi khi xuất hiện do thứ gì đó chặn http trong trình duyệt

Nếu bạn đang sử dụng ứng dụng .NET Core, giải pháp này có thể hữu ích!

Hơn nữa, đây có thể không phải là lỗi Angular hoặc yêu cầu khác trong ứng dụng giao diện người dùng của bạn

Đầu tiên, bạn phải thêm gói Microsoft CORS Nuget:

Install-Package Microsoft.AspNetCore.Cors

Sau đó, bạn cần thêm các dịch vụ CORS trong startup.cs của mình. Trong phương thức ConfigureServices của bạn, bạn sẽ có một cái gì đó tương tự như sau:

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

Tiếp theo, thêm phần mềm trung gian CORS vào ứng dụng của bạn. Trong startup.cs của bạn, bạn nên có phương thức Định cấu hình. Bạn cần phải có nó tương tự như sau:

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

Các tùy chọn lambda là một API thông thạo nên bạn có thể thêm / xóa bất kỳ tùy chọn bổ sung nào mà bạn cần. Bạn thực sự có thể sử dụng tùy chọn “AllowAnyOrigin” để chấp nhận bất kỳ miền nào, nhưng tôi thực sự khuyên bạn không nên làm điều này vì nó mở ra các cuộc gọi gốc chéo từ bất kỳ ai. Bạn cũng có thể giới hạn các cuộc gọi gốc chéo đối với Phương thức HTTP của chúng (GET / PUT / POST, v.v.), vì vậy bạn chỉ có thể hiển thị các cuộc gọi GET chéo miền, v.v.

Lỗi này xảy ra với tôi trong Firefox chứ không phải Chrome khi đang phát triển cục bộ và hóa ra là do Firefox không tin tưởng chứng chỉ ssl của API cục bộ của tôi (không hợp lệ, nhưng tôi đã thêm nó vào cửa hàng chứng chỉ địa phương của mình, điều này cho phép chrome tin tưởng nó nhưng không ff). Điều hướng trực tiếp đến API và thêm một ngoại lệ trong Firefox đã khắc phục sự cố.

Đối với tôi, đó là do JsonSerializerException phía máy chủ.

Đã xảy ra ngoại lệ không được xử lý trong khi thực hiện yêu cầu Newtonsoft.Json.JsonSerializationException: Đã phát hiện vòng lặp tự tham chiếu với kiểu ...

Khách hàng nói:

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

Làm cho kiểu phản hồi đơn giản hơn bằng cách loại bỏ các vòng lặp đã giải quyết được vấn đề.

Nếu bạn đang sử dụng Laravel làm Phụ trợ của mình, hãy chỉnh sửa tệp .htaccess của bạn bằng cách chỉ dán mã này, để giải quyết vấn đề CROS trong dự án Angular hoặc IONIC của bạn

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

Một lỗi tương tự có thể xảy ra khi bạn không cung cấp chứng chỉ máy khách và mã thông báo hợp lệ mà máy chủ của bạn hiểu:

Lỗi:

Phản hồi lỗi Http cho (url không xác định): 0 Lỗi không xác định

Mã ví dụ:

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

}

Lưu ý rằng cả hai MyClientCert& MyTokenđều là chuỗi trống, do đó xảy ra lỗi.
MyClientCert& MyTokencó thể là bất kỳ tên nào mà máy chủ của bạn hiểu được.

Tôi đang sử dụng Tiện ích mở rộng ASP.NET SPA tạo cho tôi một proxy trên các cổng 5000 và 5001 đi qua cổng 4200 của Angular trong quá trình phát triển.

Tôi đã thiết lập CORS chính xác cho cổng https 5001 và mọi thứ đều ổn, nhưng tôi vô tình truy cập vào một dấu trang cũ dành cho cổng 5000. Sau đó, thông báo này đột nhiên xuất hiện. Như những người khác đã nói trong bảng điều khiển có một thông báo lỗi 'preflight'.

Vì vậy, bất kể môi trường của bạn là gì, nếu bạn đang sử dụng CORS, hãy đảm bảo rằng bạn đã chỉ định tất cả các cổng - vì máy chủ và cổng đều quan trọng.

Tôi nhận được thông báo chính xác đó bất cứ khi nào yêu cầu của tôi mất hơn 2 phút để hoàn thành. Trình duyệt sẽ ngắt kết nối khỏi yêu cầu, nhưng yêu cầu trên chương trình phụ trợ vẫn tiếp tục cho đến khi hoàn tất. Máy chủ (ASP.NET Web API trong trường hợp của tôi) sẽ không phát hiện ra ngắt kết nối.

Sau cả ngày tìm kiếm, cuối cùng tôi đã tìm ra câu trả lời này , giải thích rằng nếu bạn sử dụng cấu hình proxy , nó có thời gian chờ mặc định là 120 giây (hoặc 2 phút).

Vì vậy, bạn có thể chỉnh sửa cấu hình proxy của mình và đặt nó thành bất kỳ thứ gì bạn cần:

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

Bây giờ, tôi đang sử dụng agentkeepalive để làm cho nó hoạt động với xác thực NTLM và không biết rằng thời gian chờ của agent không liên quan gì đến thời gian chờ của proxy, vì vậy cả hai đều phải được đặt. Tôi đã mất một lúc để nhận ra điều đó, vì vậy đây là một ví dụ:

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(',');
        }
    }
};

Đối với tôi, đó là vấn đề về trình duyệt, vì các yêu cầu của tôi đều hoạt động tốt trong Postman.

Hóa ra vì một số lý do, Firefox và Chrome đã chặn các yêu cầu chuyển đến cổng 6000, khi tôi thay đổi cổng API ASP.NET thành 4000, lỗi đã chuyển thành lỗi CORS đã biết mà tôi có thể sửa.

Chrome ít nhất đã cho tôi thấy ERR_UNSAFE_PORTđiều đó cho tôi manh mối về những gì có thể xảy ra.

Nếu bạn có một tiêu đề cors thích hợp tại chỗ. Mạng công ty của bạn có thể đang loại bỏ tiêu đề cors. Nếu trang web có thể truy cập từ bên ngoài, hãy thử truy cập từ bên ngoài mạng của bạn để xác minh xem mạng có đang gây ra sự cố hay không - một ý tưởng hay bất kể nguyên nhân là gì.

Trong lõi asp.net, Nếu bộ điều khiển api của bạn không có chú thích được gọi [AllowAnonymous], hãy thêm nó vào phía trên tên bộ điều khiển của bạn như

[ApiController]
    [Route("api/")]
    [AllowAnonymous]
    public class TestController : ControllerBase

Không quá cũ như các câu hỏi khác, nhưng tôi chỉ gặp khó khăn với điều này trong một ứng dụng Ionic-Laravel và không có gì hoạt động từ đây (và các bài đăng khác), vì vậy tôi đã cài đặt https://github.com/barryvdh/laravel-cors bổ sung trong Laravel và bắt đầu và nó hoạt động khá tốt.

Của tôi là do mối quan hệ không hợp lệ trong các mô hình mà tôi đang cố gắng truy vấn. Tìm ra bằng cách gỡ lỗi phản hồi mà nó gặp sự cố tại mối quan hệ.

Đối với tôi, đó không phải là một vấn đề góc cạnh. Là một trường kiểu DateTime trong DB có giá trị (0000-00-00) và mô hình của tôi không thể ràng buộc thuộc tính đó chính xác, vì vậy tôi đã thay đổi thành giá trị hợp lệ như (2019-08-12).

Tôi đang sử dụng lõi .net, OData v4 và MySql (đầu nối bưởi EF)

Thêm mã này vào tệp kết nối của bạn

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

Nếu đây là một dịch vụ nút, hãy thử các bước được nêu ở đây

Về cơ bản, đó là lỗi Chia sẻ Tài nguyên Nhiều Nguồn gốc (CORS). Thông tin thêm về các lỗi như vậy ở đây .

Sau khi tôi cập nhật dịch vụ nút của mình với các dòng sau, nó đã hoạt động:

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

Lỗi của tôi là tệp quá lớn (lõi dotnet dường như có giới hạn @ ~ 25Mb). Cài đặt

• maxAllowedContentLength đến 4294967295 (giá trị tối đa của uint) trong web.config
• trang trí hành động của bộ điều khiển với [DisableRequestSizeLimit]
• services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); trong Startup.cs

đã giải quyết vấn đề cho tôi.