Angular2:使用 angular-http RequestOptions 时非常模糊的错误，其中 Angular-http 标头工作正常 [英] Angular2: Very vague error when using angular-http RequestOptions where Angular-http Headers works fine

问题描述

我正忙于一个小型 ngCli angular2 Web 应用程序，我正在尝试使用 RestService 发布到 API... 我在 Rest 服务中有一些其他 get 函数，我使用 Headers 而不是 RequestOptions美好的.我正在尝试将 RequestOptions 与 post 方法一起使用，但在 Chrome 开发工具控制台中不断收到以下错误.(我尝试在我的工作获取请求中使用 RequestOptions 而不是标头并得到相同的错误).知道是什么原因造成的吗?我是否正确使用 RequestOptions?

I am busy with a small ngCli angular2 web app where i'm trying to use a RestService to post to a API... I have a few other get functions in the Rest Service where I use Headers instead of RequestOptions which works fine. I am trying to use RequestOptions with the post method but keep getting the following error in Chrome dev tools console. (I tried using RequestOptions instead of headers with my working get requests and getting the same error). Any idea what could be causing this? Am I using RequestOptions correctly?

my error:

zone.js:1725
OPTIONS
http://10.60.160.34/BRMServices/WebEnquiry/StockTake/AddToStockTake
net::ERR_CONNECTION_RESET

table with 4 columns and 32 rows
 
scheduleTask
@ 
zone.js:1725  
ZoneDelegate.scheduleTask
@
zone.js:255  
Zone.scheduleMacroTask
@
zone.js:168  
(anonymous)
@
zone.js:1749  
send
@
VM384:3  
(anonymous)
@
xhr_backend.js:125  
Observable.subscribe
@
Observable.js:45  
MapOperator.call
@
map.js:54  
Observable.subscribe
@
Observable.js:42  
CatchOperator.call
@
catch.js:31  
Observable.subscribe
@
Observable.js:42  
StockTakeComponent.submitStockTake
@
stock-take.component.ts:45  
StockTakeComponent.doStockTake
@
stock-take.component.ts:38  
View_StockTakeComponent0.handleEvent_10
@
component.ngfactory.js:281  
(anonymous)
@
view.js:664  
schedulerFn
@
async.js:103  
SafeSubscriber.__tryOrUnsub
@
Subscriber.js:223  
SafeSubscriber.next
@
Subscriber.js:172  
Subscriber._next
@
Subscriber.js:125  
Subscriber.next
@
Subscriber.js:89  
Subject.next
@
Subject.js:55  
EventEmitter.emit
@
async.js:77  
FormGroupDirective.onSubmit
@
form_group_directive.js:190  
Wrapper_FormGroupDirective.handleEvent
@
wrapper.ngfactory.js:42  
View_StockTakeComponent0.handleEvent_10
@
component.ngfactory.js:279  
(anonymous)
@
view.js:664  
(anonymous)
@
dom_renderer.js:490  
ZoneDelegate.invokeTask
@
zone.js:275  
onInvokeTask
@
ng_zone.js:260  
ZoneDelegate.invokeTask
@
zone.js:274  
Zone.runTask
@
zone.js:151  
ZoneTask.invoke
@
zone.js:345
table end


my Restservice.ts:

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, URLSearchParams  } from "@angular/http";
import { Observable } from  'rxjs/Rx';

import { ProductModel } from '../models/product.model';
import { StockTransactionModel } from '../models/stock-transaction.model';
import { StockTakeModel } from '../models/stock-take.model';


@Injectable()
export class RestService {
private API_URL: string;
private localIP: string;
private headers: Headers;
private options: RequestOptions;



  constructor(private http: Http){    
  }

  init(ip: string): void {        
      this.localIP = ip;
      this.headers = new Headers({ 'Content-Type': 'application/json' });
      this.options = new RequestOptions({ headers: this.headers });
      this.API_URL = "http://" + this.localIP + "/BRMServices/WebEnquiry/";
  }

  getProduct(barcode: string): Observable<ProductModel> {         
      return this.http.get(this.API_URL + "/POSEnquiry/" + barcode, this.headers)
      .map((res: Response) => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }  

  getStockTransactions(productCode: string) : Observable<StockTransactionModel[]> {
      return this.http.get(this.API_URL + "StockTransactions/" + productCode, this.headers)
      .map((res: Response) => res.json())
      .catch((error: any ) => Observable.throw(error.json().error || 'server error'));    
  }

  postStockTake(stockTakeModel: StockTakeModel) : Observable<Response> {
      console.log(JSON.stringify(stockTakeModel));

        return this.http.post(this.API_URL + "StockTake/AddToStockTake",  {stockTakeModel}, {headers: this.headers})
        .map((res: Response) => res.json())
        .catch((error: any) => Observable.throw(error.json().error || 'server error'));
  }

  ping(ip: string) : Observable<Response> {
      let tempApiUrl: string = "http://" + ip + "/BRMServices/WebEnquiry/ping";
      return this.http.get(tempApiUrl, this.headers)
      .map((res: Response) => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'server error'));
  }

}

更新:从 chrome://net-internals 我得到:

Update: from chrome://net-internals I get:

http://10.60.160.34/BRMServices/WebEnquiry/StockTake/AddToStockTake
Start Time: 2017-01-13 14:44:30.800
t=19711 [st=0] +REQUEST_ALIVE  [dt=3]
t=19711 [st=0]    URL_REQUEST_DELEGATE  [dt=0]
t=19711 [st=0]   +URL_REQUEST_START_JOB  [dt=3]
                  --> load_flags = 34624 (DO_NOT_SAVE_COOKIES | DO_NOT_SEND_AUTH_DATA | DO_NOT_SEND_COOKIES | MAYBE_USER_GESTURE | VERIFY_EV_CERT)
                  --> method = "OPTIONS"
                  --> priority = "MEDIUM"
                  --> url = "http://10.60.160.34/BRMServices/WebEnquiry/StockTake/AddToStockTake"
t=19711 [st=0]      URL_REQUEST_DELEGATE  [dt=0]
t=19711 [st=0]      HTTP_CACHE_GET_BACKEND  [dt=0]
t=19711 [st=0]     +HTTP_STREAM_REQUEST  [dt=1]
t=19711 [st=0]        HTTP_STREAM_REQUEST_STARTED_JOB

 --> source_dependency = 6474 (HTTP_STREAM_JOB)

t=19712 [st=1]        HTTP_STREAM_REQUEST_BOUND_TO_JOB

 --> source_dependency = 6474 (HTTP_STREAM_JOB)

t=19712 [st=1]     -HTTP_STREAM_REQUEST
t=19712 [st=1]     +HTTP_TRANSACTION_SEND_REQUEST  [dt=0]
t=19712 [st=1]        HTTP_TRANSACTION_SEND_REQUEST_HEADERS
                      --> OPTIONS /BRMServices/WebEnquiry/StockTake/AddToStockTake HTTP/1.1
                          Host: 10.60.160.34
                          Connection: keep-alive
                          Access-Control-Request-Method: POST
                          Origin: http://localhost:4200
                          User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
                          Access-Control-Request-Headers: content-type
                          Accept: */*
                          Referer: http://localhost:4200/stockTake
                          Accept-Encoding: gzip, deflate, sdch
                          Accept-Language: en-US,en;q=0.8
t=19712 [st=1]     -HTTP_TRANSACTION_SEND_REQUEST
t=19712 [st=1]     +HTTP_TRANSACTION_READ_HEADERS  [dt=2]
t=19712 [st=1]        HTTP_STREAM_PARSER_READ_HEADERS  [dt=2]
                      --> net_error = -101 (ERR_CONNECTION_RESET)
t=19714 [st=3]     -HTTP_TRANSACTION_READ_HEADERS
                    --> net_error = -101 (ERR_CONNECTION_RESET)
t=19714 [st=3]   -URL_REQUEST_START_JOB
                  --> net_error = -101 (ERR_CONNECTION_RESET)
t=19714 [st=3]    URL_REQUEST_DELEGATE  [dt=0]
t=19714 [st=3] -REQUEST_ALIVE
                --> net_error = -101 (ERR_CONNECTION_RESET)

推荐答案

post 方法的第三个参数是 RequestOptionsArgs，而不是 RequestOptions.

The third argument of the post method is a RequestOptionsArgs, not a RequestOptions.

Http API 文档

这篇关于Angular2:使用 angular-http RequestOptions 时非常模糊的错误，其中 Angular-http 标头工作正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！