Получение статуса 0 вместо 401 в ответе

Question

Я отправляю запрос в службу, которая требует проверки подлинности, и поскольку мое текущее состояние не соответствует действительности, я получаю ответ 401. Я пытаюсь понять, смогу ли я справиться с этим в своем коде на стороне клиента и написать в Typescript:

this.http.post(url, body, options).catch(e => {
    if (e.status === 401) {
        //Handle 401
    }
    return Observable.throw(e);
});

Но проблема в том, что e.status равно нулю, хотя с сетевой панели я вижу, что статус ответа на самом деле 401. Это проблема с Angular или я что-то не так сделал?

Это возвращаемое значение для JSON.strigify(e):

{
    "_body": { "isTrusted": true },
    "status": 0,
    "ok": false,
    "statusText": "",
    "headers": {},
    "type": 3,
    "url": null
}

Кстати, я использую Angular 4.0.0 (ядро и http).

Это ошибка, которую я получаю в консоли из-за запроса на отправку, отправленного выше:

(2) POST http://192.168.2.10:8080/test 401 ()
XMLHttpRequest cannot load http://192.168.2.10:8080/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.10:4200' is therefore not allowed access. The response had HTTP status code 401.

Еще одна загадка заключается в том, что на консоли сообщается о двух ошибках после отправки запроса, а по панели сети отправляется только одна.

Answer 1

Я слишком долго разбираюсь в этой проблеме: вам нужно добавить OPTIONS в конфигурацию метода CORS на стороне сервера. Моя последняя конфигурация CORS для выражения:

const corsOpt = { 
    origin: 'https://www.yourhost.com', // to configure origin url in the server 
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'], // to work well with web app, OPTIONS is required 
    allowedHeaders: ['Content-Type', 'Authorization'] // allow json and token in the headers 
}; 

Answer 2

Я выяснил, что является причиной проблемы.. Это проблема на стороне сервера. Сначала необходимо установить промежуточное ПО CORS, а затем остальные промежуточные программы API.

Обратите внимание, я работаю с Laravel 5.6 + Angular 5

Неправильный код

'api' => [ 'throttle:60,1', 'bindings', \Barryvdh\Cors\HandleCors::class, ],

Правильный код

'api' => [ \Barryvdh\Cors\HandleCors::class, 'throttle:60,1', 'bindings' ],

Answer 3

Если вы хотите узнать статус ошибки вашего сервиса

 import { Injectable } from '@angular/core';
 import { Http, Response, Headers } from '@angular/http';
 import 'rxjs/add/operator/map';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/throw';
 import 'rxjs/add/operator/catch';



 @Injectable()
 export class ExampleService {

    headers: Headers;

    constructor(private http: Http) {
            this.headers = new Headers();
            this.headers.append('Content-Type', 'application/json; charset=utf-8');
            this.headers.append('Accepts', '*/*');
            // this.headers.append()
    }

  service1() {

     let url = 'http://example.com/products';
     return this.http.get(url, this.headers).map((resp: Response) => { 
                    console.log('resp status', resp.status);
                    return resp.json();
            }).catch((resp: Response) => {
                    let details = resp.json();
                    console.log(resp.status); // here you get the error code in your case 401
                    return Observable.throw(details);
            });
  }
}

в примере глагол http - GET, вы можете попробовать использовать POST, это та же идея.

Я надеюсь, что это поможет вам