首页 文章

错误http POST Angular Requestbin

提问于
浏览
0

对预检请求的响应未通过访问控制检查:请求中不存在“Access-Control-Allow-Origin”标头

我正试图通过Angular应用程序5在Requestbin中执行POST,但我遇到了问题 .

我在localhost上运行我的应用程序,我认为由于这个原因,通信中存在错误 .

当我通过Postman运行帖子时,它正常工作 .

我究竟做错了什么?

执行以下方法时,发生以下错误:

const options = {
  headers: new HttpHeaders({
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Origin': '*'
  })
};

  newRequest() {
    return new Promise((resolve, reject) => {
      this.http.post('https://requestb.in/1nfocrm4', { 'name': 'User Test' }, options)
        .subscribe((result: any) => {
          resolve(result);
        },
          (response: any) => {
            reject(response);
          }
        )
    })
  }

控制台开发人员工具出错:

Failed to load https://requestb.in/1nfocrm4: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
app.component.ts:21 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

3 回答

  • 0

    在本地后端应用程序中,您需要启用 CORS 以允许角度应用程序访问数据 .

  • 0

    **Allow-Control-Allow-Origin: *** 扩展名

    我在Google Chrome中添加了一个扩展程序,并解决了错误,但现在它又返回了另一个错误

    app.component.ts:21 HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "https://requestb.in/1nfocrm4", ok: false, …}error: {error: SyntaxError: Unexpected token o in JSON at position 0
        at JSON.parse (<anonymous>)
        at XMLHttp…, text: "ok"}error: SyntaxError: Unexpected token o in JSON at position 0
        at JSON.parse (<anonymous>)
        at XMLHttpRequest.onLoad (webpack-internal:///../../../common/esm5/http.js:2291:51)
        at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:421:31)
        at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4956:33)
        at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:420:36)
        at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:188:47)
        at ZoneTask.invokeTask [as invoke] (webpack-internal:///../../../../zone.js/dist/zone.js:496:34)
        at invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:1517:14)
        at XMLHttpRequest.globalZoneAwareCallback (webpack-internal:///../../../../zone.js/dist/zone.js:1543:17)text: "ok"__proto__: Objectheaders: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure during parsing for https://requestb.in/1nfocrm1"name: "HttpErrorResponse"ok: falsestatus: 200statusText: "OK"url: "https://requestb.in/1nfocrm1"__proto__: HttpResponseBase
    (anonymous) @ app.component.ts:21
    ZoneDelegate.invoke @ zone.js:388
    onInvoke @ core.js:4749
    ZoneDelegate.invoke @ zone.js:387
    Zone.run @ zone.js:138
    (anonymous) @ zone.js:858
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4740
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    drainMicroTaskQueue @ zone.js:595
    ZoneTask.invokeTask @ zone.js:500
    invokeTask @ zone.js:1517
    globalZoneAwareCallback @ zone.js:1543
    XMLHttpRequest.send (async)
    scheduleTask @ zone.js:2935
    ZoneDelegate.scheduleTask @ zone.js:407
    onScheduleTask @ zone.js:297
    ZoneDelegate.scheduleTask @ zone.js:401
    Zone.scheduleTask @ zone.js:232
    Zone.scheduleMacroTask @ zone.js:255
    scheduleMacroTaskWithCurrentZone @ zone.js:1092
    (anonymous) @ zone.js:2967
    proto.(anonymous function) @ zone.js:1372
    (anonymous) @ http.js:2366
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    subscribeToResult @ subscribeToResult.js:23
    MergeMapSubscriber._innerSub @ mergeMap.js:138
    MergeMapSubscriber._tryNext @ mergeMap.js:135
    MergeMapSubscriber._next @ mergeMap.js:118
    Subscriber.next @ Subscriber.js:92
    ScalarObservable._subscribe @ ScalarObservable.js:51
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    MergeMapOperator.call @ mergeMap.js:92
    Observable.subscribe @ Observable.js:157
    FilterOperator.call @ filter.js:61
    Observable.subscribe @ Observable.js:157
    MapOperator.call @ map.js:57
    Observable.subscribe @ Observable.js:157
    (anonymous) @ moip-api.service.ts:34
    ZoneAwarePromise @ zone.js:875
    MoipApiService.newRequest @ moip-api.service.ts:32
    AppComponent.newRequest @ app.component.ts:18
    (anonymous) @ AppComponent.html:10
    handleEvent @ core.js:13547
    callWithDebugContext @ core.js:15056
    debugHandleEvent @ core.js:14643
    dispatchEvent @ core.js:9962
    (anonymous) @ core.js:10587
    (anonymous) @ platform-browser.js:2628
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4740
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1517
    globalZoneAwareCallback @ zone.js:1543
    
  • 0

    我对此的解决方案是:

    在Google Chorme中安装名为 allow-control-allow-origin extension 的扩展程序,然后启用跨源 .

    requestbin的响应是一个文本,所以我不得不在GET中传递一个参数

    this.http.get ('https://requestb.in/1nfocrm4', {responseType: 'text'})
    

相关问题