我试图通过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, …}
答案 0 :(得分:0)
在您的本地后端应用程序中,您需要启用CORS
以允许您的角度应用访问数据。
答案 1 :(得分:0)
允许 - 控制 - 允许 - 来源:* 扩展名
我在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
答案 2 :(得分:0)
在Google Chorme中安装名为 allow-control-allow-origin extension 的扩展程序,然后启用跨源。
requestbin的响应是一个文本,所以我必须在GET中传递一个参数
this.http.get ('https://requestb.in/1nfocrm4', {responseType: 'text'})