Question

对预检请求的响应未通过访问控制检查：否＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的

上

我试图通过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, …}

Answer 1

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

Answer 2

允许 - 控制 - 允许 - 来源：* 扩展名

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

Answer 3

我对此的解决方案是：

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

requestbin的响应是一个文本，所以我必须在GET中传递一个参数

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

错误http POST Angular Requestbin

对预检请求的响应未通过访问控制检查：否＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的

3 个答案:

我对此的解决方案是：