ฉันได้รับ“ การตอบสนองความล้มเหลวของ Http สำหรับ (url ที่ไม่รู้จัก): 0 ข้อผิดพลาดที่ไม่รู้จัก” แทนข้อความแสดงข้อผิดพลาดจริงใน 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ข้อความทั่วไป ในคอนโซล ในขณะเดียวกันเมื่อฉันตรวจสอบคำขอที่ล้มเหลวใน chrome ฉันเห็นสถานะการตอบกลับเป็น 422 และในแท็บ "ดูตัวอย่าง" ฉันเห็นข้อความจริงที่ระบุสาเหตุของความล้มเหลว

ฉันจะเข้าถึงข้อความตอบกลับจริงที่เห็นในเครื่องมือ Chrome dev ได้อย่างไร

นี่คือภาพหน้าจอที่แสดงปัญหา:

ปัญหาที่เกี่ยวข้องกับธ ฉันสังเกตเห็นว่ามีข้อผิดพลาดอื่นในคอนโซล Chrome:

ไม่มีส่วนหัว "Access-Control-Allow-Origin" ในทรัพยากรที่ร้องขอ Origin ' http: // localhost: 4200 ' จึงไม่ได้รับอนุญาตให้เข้าถึง การตอบสนองมีรหัสสถานะ HTTP 422 "

ที่นี้หมายถึงการตอบสนองจากเซิร์ฟเวอร์แบ็กเอนด์ที่ขาดหายไปAccess-Control-Allow-Originส่วนหัวแม้ว่าแบ็กเอนด์ Nginx ถูกกำหนดค่าให้เพิ่มส่วนหัวเหล่านั้นเพื่อตอบสนองกับคำสั่งadd_header

อย่างไรก็ตามคำสั่งนี้จะเพิ่มส่วนหัวเมื่อโค้ดตอบกลับเป็น 20X หรือ 30X เท่านั้น เกี่ยวกับการตอบสนองข้อผิดพลาดส่วนหัวหายไป ฉันจำเป็นต้องใช้alwaysพารามิเตอร์เพื่อให้แน่ใจว่ามีการเพิ่มส่วนหัวโดยไม่คำนึงถึงรหัสตอบกลับ:

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

เมื่อกำหนดค่าแบ็กเอนด์อย่างถูกต้องแล้วฉันสามารถเข้าถึงข้อความแสดงข้อผิดพลาดจริงในรหัสเชิงมุมได้

ในกรณีที่ใครก็ตามที่หลงทางเหมือนฉัน ... ปัญหาของฉันไม่ได้เกิดจาก 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 ใน 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 โซลูชันนี้อาจช่วยได้!

ยิ่งไปกว่านั้นอาจไม่ใช่ข้อผิดพลาดเชิงมุมหรือคำขออื่น ๆในแอปพลิเคชันส่วนหน้าของคุณ

ขั้นแรกคุณต้องเพิ่มแพ็คเกจ 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 ในพื้นที่ของฉัน(ซึ่งไม่ถูกต้อง แต่ฉันได้เพิ่มลงในที่เก็บใบรับรองในพื้นที่ของฉันซึ่งปล่อยให้ chrome เชื่อถือได้ แต่ไม่ใช่ 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 เป็นแบ็กเอนด์ของคุณให้แก้ไขไฟล์. 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 Extensions ซึ่งสร้างพร็อกซีให้ฉันบนพอร์ต 5000 และ 5001 ที่ส่งผ่านไปยังพอร์ต 4200 ของ Angular ในระหว่างการพัฒนา

ฉันได้ตั้งค่า CORS อย่างถูกต้องสำหรับพอร์ต https 5001 และทุกอย่างเรียบร้อยดี แต่ฉันไปที่บุ๊กมาร์กเก่าซึ่งใช้สำหรับพอร์ต 5000 โดยไม่ได้ตั้งใจทันใดนั้นข้อความนี้ก็เกิดขึ้น ตามที่คนอื่นพูดในคอนโซลมีข้อความแสดงข้อผิดพลาด "preflight"

ดังนั้นโดยไม่คำนึงถึงสภาพแวดล้อมของคุณหากคุณใช้ CORS ตรวจสอบให้แน่ใจว่าคุณมีพอร์ตทั้งหมดที่ระบุไว้ - เนื่องจากโฮสต์และพอร์ตมีความสำคัญทั้งคู่

ฉันได้รับข้อความนั้นทุกครั้งที่คำขอของฉันใช้เวลานานกว่า 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(',');
        }
    }
};

สำหรับฉันมันเป็นปัญหาเกี่ยวกับเบราว์เซอร์เนื่องจากคำขอของฉันทำงานได้ดีในบุรุษไปรษณีย์

ปรากฎว่าด้วยเหตุผลบางประการ Firefox และ Chrome ได้บล็อกคำขอที่จะไปที่พอร์ต6000เมื่อฉันเปลี่ยนพอร์ต ASP.NET API เป็น4000เป็นข้อผิดพลาดก็เปลี่ยนเป็นข้อผิดพลาด CORS ที่ทราบซึ่งฉันสามารถแก้ไขได้

อย่างน้อย Chrome ก็แสดงให้ฉันเห็นERR_UNSAFE_PORTซึ่งให้เบาะแสเกี่ยวกับสิ่งที่อาจผิดพลาด

หากคุณมีส่วนหัวของคอร์ที่เหมาะสม เครือข่ายองค์กรของคุณอาจถูกถอดออกจากส่วนหัวของ cors หากเว็บไซต์สามารถเข้าถึงได้จากภายนอกให้ลองเข้าถึงจากภายนอกเครือข่ายของคุณเพื่อตรวจสอบว่าเครือข่ายเป็นสาเหตุของปัญหาหรือไม่ - เป็นความคิดที่ดีโดยไม่คำนึงถึงสาเหตุ

ในแกน asp.net หากคอนโทรลเลอร์ api ของคุณไม่มีคำอธิบายประกอบ[AllowAnonymous]ให้เพิ่มไว้เหนือชื่อคอนโทรลเลอร์ของคุณเช่น

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

ไม่เก่าเหมือนคำถามอื่น ๆ แต่ฉันเพิ่งต่อสู้กับสิ่งนี้ในแอป Ionic-Laravel และไม่มีอะไรทำงานจากที่นี่ (และโพสต์อื่น ๆ ) ดังนั้นฉันจึงติดตั้งhttps://github.com/barryvdh/laravel-cors complement ใน Laravel และเริ่มต้นและทำงานได้ดี

ของฉันเกิดจากความสัมพันธ์ที่ไม่ถูกต้องในแบบจำลองที่ฉันพยายามค้นหา คิดออกโดยการดีบักการตอบสนองที่ล้มเหลวที่ความสัมพันธ์

สำหรับฉันมันไม่ใช่ปัญหาเชิงมุม เป็นฟิลด์ประเภท DateTime ใน DB ที่มีค่า (0000-00-00) และโมเดลของฉันไม่สามารถผูกคุณสมบัตินั้นได้ถูกต้องดังนั้นฉันจึงเปลี่ยนเป็นค่าที่ถูกต้องเช่น (2019-08-12)

ฉันใช้. net core, OData v4 และ MySql (EF pomelo connector)

เพิ่มรหัสนี้ในไฟล์การเชื่อมต่อของคุณ

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

หากนี่คือบริการโหนดให้ลองทำตามขั้นตอนที่ระบุไว้ ที่นี่

โดยทั่วไปเป็นข้อผิดพลาด Cross-Origin Resource Sharing (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 core ดูเหมือนจะมีขีด จำกัด ที่ ~ 25Mb) การตั้งค่า

• maxAllowedContentLength ถึง 4294967295 (ค่าสูงสุดของ uint) ใน web.config
• การตกแต่งแอ็คชันคอนโทรลเลอร์ด้วย [DisableRequestSizeLimit]
• services.Configure (ตัวเลือก => {options.MultipartBodyLengthLimit = 4294967295;}); ใน Startup.cs

แก้ปัญหาให้ฉัน