Inconsistent behavior from react-native-blob-util and fetch - react-native

I'm trying to call an API that takes an image and some data and returns json. I'm using react-native-blob-util with fetch. Problem is, the same code is working sometimes but failing in the next attempt - almost every alternate request is not submitting the data.
For replicating the issue, I have created the following code. It takes the **same** image file and parameters to make a fetch request.
(I am testing on android)
A button to call fetch function:
<TouchableOpacity
style={styles.btn}
onPress={() => {
MatchFace();
}}
>
<Text style={styles.btnText}>
Call API
</Text>
</TouchableOpacity>
And then this is the function that calls API:
const MatchFace = async () => {
setData([]);
ReactNativeBlobUtil.fetch(
'POST',
'url_for_the_api',
{
'Content-Type': 'multipart/form-data',
'Api-Key': 'api_key',
},[
{ name : 'image', filename : 'profile.jpg', type:'image/jpg', data: ReactNativeBlobUtil.wrap(decodeURIComponent('file:///storage/emulated/0/Download/profile.JPG'))},
{ name : 'album_id', data : '2'},
]
)
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => console.log(data));
}
Part of log
**No response case**
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 []
**Case where I get response**
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod # G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) # G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) # RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod # G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) # G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) # RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149 Error: unexpected end of stream
at G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:256
at MessageQueue.__invokeCallback (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:465)
at G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:127
at MessageQueue.__guard (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:126)
at RNDebuggerWorker.js:2
reactConsoleErrorHandler # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149
registerError # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:204
console.error # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:67
overrideMethod # G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
eval # G:\react-native\FaceAttendance\Screens\stackOverFlow.js:51
tryCallOne # G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:37
(anonymous) # G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:123
(anonymous) # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248
_callTimer # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112
_callReactNativeMicrotasksPass # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:166
callReactNativeMicrotasks # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:418
__callReactNativeMicrotasks # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:393
(anonymous) # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135
__guard # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
flushedQueue # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134
invokeCallbackAndReturnFlushedQueue # G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:130
(anonymous) # RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 {num_faces: 1, num_recognized_faces: 1, num_unknown_faces: 0, recognized_faces: Array(1), unknown_faces: Array(0)}
I'm sure that API is performing correctly (tested from test apps on react, php and also postman). I'm possibly doing something wrong with the react-native filesytem.
Oh, one more input - my application needs to call this API in every few seconds when the app runs.

Related

404 when making a get request with axios

I'm getting a 404 request for this:
import axios from "axios";
axios
.get("https://api-public.sandbox.pro.coinbase.com")
.then((data) => console.log(data.json()));
The error:
Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)
createError # createError.js:16
settle # settle.js:17
handleLoad # xhr.js:61
Promise.then (async)
(anonymous) # App.js:75
invokePassiveEffectCreate # react-dom.development.js:23487
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
flushPassiveEffectsImpl # react-dom.development.js:23574
unstable_runWithPriority # scheduler.development.js:468
runWithPriority$1 # react-dom.development.js:11276
flushPassiveEffects # react-dom.development.js:23447
(anonymous) # react-dom.development.js:23324
workLoop # scheduler.development.js:417
flushWork # scheduler.development.js:390
performWorkUntilDeadline # scheduler.development.js:157
It's because of cors. What is the best way to fix this?
It's because of cors. What is the best way to fix this?
Use this server https://cors-anywhere.herokuapp.com/ as a proxy on your request, it solved it for me, for more detail on it click here
or you can try using the fetch api
I'd recommend, you use a catch on that Axios request to get more details on the error
Try below code;
import axios from 'axios';
//Create Axios instance
const Instance = axios.create({
baseURL: "https://api-public.sandbox.pro.coinbase.com",
timeout: 15000,
timeoutErrorMessage: 'Your request Timed-out',
headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }
});
//Export the Instance if needed
//From a function, use the instance
Instance.get("")
.then((data) => console.log(data.json()));

Polymer 2.0 - Firebase Messaging Error - Uncaught (in promise) DOMException: Registration failed - push service error

I have a PWA app using Polymer 2.0 and firebase. Firebase messaging is throwing error.
Firebase v3.18.4
"polymer": "Polymer/polymer#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"polymerfire": "firebase/polymerfire#^2.2.0",
Uncaught (in promise) DOMException: Registration failed - push service error
Promise.then (async)
refreshToken # firebase-messaging.html:87
activateMessaging # firebase-messaging.html:125
activate # firebase-messaging.html:243
_bootstrapApp # firebase-messaging.html:259
runMethodEffect # property-effects.html:813
runEffectsForProperty # property-effects.html:159
runEffects # property-effects.html:125
_propertiesChanged # property-effects.html:1703
_flushProperties # properties-changed.html:338
_flushProperties # property-effects.html:1551
_invalidateProperties # property-effects.html:1523
_setProperty # property-effects.html:1508
Object.defineProperty.set # properties-changed.html:150
__appNameChanged # firebase-common-behavior.html:47
runObserverEffect # property-effects.html:214
runEffectsForProperty # property-effects.html:159
runEffects # property-effects.html:125
_propertiesChanged # property-effects.html:1703
_flushProperties # properties-changed.html:338
_flushProperties # property-effects.html:1551
ready # property-effects.html:1656
ready # element-mixin.html:546
ready # dir-mixin.html:140
ready # legacy-element-mixin.html:198
ready # class.html:232
ready # class.html:232
ready # class.html:232
_enableProperties # properties-changed.html:321
connectedCallback # properties-mixin.html:208
connectedCallback # element-mixin.html:532
connectedCallback # dir-mixin.html:150
connectedCallback # legacy-element-mixin.html:105
_attachDom # element-mixin.html:588
_readyClients # element-mixin.html:561
_flushClients # property-effects.html:1565
_propertiesChanged # property-effects.html:1699
_flushProperties # properties-changed.html:338
_flushProperties # property-effects.html:1551
ready # property-effects.html:1656
ready # element-mixin.html:546
ready # my-app.html:540
_enableProperties # properties-changed.html:321
connectedCallback # properties-mixin.html:208
connectedCallback # element-mixin.html:532
(anonymous) # my-app.html:849
The messaging doesn't work in Chrome Desktop - [Google Chrome is up to date
Version 66.0.3359.139 (Official Build) (64-bit)] as well as in Chrome Android - [Application version Chrome 66.0.3359.126
Code used
my-app.html (PolymerElement)
<script src="bower_components/firebase/firebase-app.js"></script>
<script src="bower_components/firebase/firebase-auth.js"></script>
<script src="bower_components/firebase/firebase-database.js">
</script>
<script src="bower_components/firebase/firebase-firestore.js">
</script>
<script src="bower_components/firebase/firebase-messaging.js">
</script>
<script src="bower_components/firebase/firebase-storage.js">
</script>
<firebase-app
auth-domain="[[configFirebase.authDomain]]"
database-url="[[configFirebase.databaseURL]]"
api-key="[[configFirebase.apiKey]]"
storage-bucket="[[configFirebase.storageBucket]]"
messaging-sender-id="[[configFirebase.messagingSenderId]]">
</firebase-app>
<firebase-auth
id="auth"
user="{{user}}"
signed-in="{{signedIn}}"
status-known="{{statusKnown}}"
on-error="_handleError">
</firebase-auth>
<firebase-messaging
id="messaging"
token="{{token}}"
on-message="handleMessage"
active="{{fcmActive}}"
status-known="{{fcmStatusKnown}}">
</firebase-messaging>
<firebase-document path="/users/[[user.uid]]/token" data=".
{{tokenDocVal}}">
</firebase-document>
class MyApp extends Polymer.Element {
static get is() { return 'my-app'; }
ready() {
this.addEventListener('request-fcm-permission',
this._requestFcmPermission);
super.ready();
}
_requestFcmPermission() {
var fcm = this.$.messaging;
var self = this;
if (this.user && !fcm.active) {
fcm.requestPermission()
.then(function(){
console.log('FCM permission granted');
console.log('[[token]] ->' + self.token);
self.tokenDocVal = self.token;
})
.catch(function(e){
console.warn('FCM permission blocked', e);
})
}
}
... other html code ....
And the
firebase-messaging-sw.js
importScripts('/bower_components/firebase/firebase-app.js');
importScripts('/bower_components/firebase/firebase-
messaging.js');
firebase.initializeApp({
'messagingSenderId': '<project-ms-id>'
});
var messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background
message
', payload);
var notificationTitle = payload.notification.title;
var notificationOptions = {
body: payload.notification.body,
icon: '../images/fresh/android/android-launchericon-24-24.png'
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
Manifest.json includes "gcm_sender_id": "103953800507",
Request help to resolve the issue. I have been on this issue for long and don't know why its happening and how to fix it.
I have also added a comment on the issue on GITHUB -
https://github.com/firebase/firebase-js-sdk/issues/152
Source code to replicate:
Git source code to replicate the issue
https://github.com/vinvantest/git_issue_firebase_login

IBM MFP8 JavaScript Adapter connection timeout

I am working with IBM MFP 8 JavaScript Adapters. As per the blogs or documentation below the request from Cordova Application.
var resourceRequest = new WLResourceRequest(
"adapters/LoginAdapter/validateLogin",
WLResourceRequest.POST
);
resourceRequest.sendFormParameters(params).then(
( response ) => {
resolve( response );
}, ( error ) => {
reject( error );
}
);
My problem here is, if I call the above method I get Connection Timeout. But if I pass the full url as below, it works.
var resourceRequest = new WLResourceRequest(
'http://xxx.xx.xx:9080/mfp/api' + "adapters/LoginAdapter/validateLogin",
WLResourceRequest.POST
);
resourceRequest.sendFormParameters(params).then(
( response ) => {
resolve( response );
}, ( error ) => {
reject( error );
}
);
Can anyone please confirm me if I have to pass the full URL for Adapter connection.
Thanks in advance.
Update :
When I try connecting to Adapters from IBM Mobile Simulator, I get the below error and connection is not established.
ERROR TypeError: Cannot read property 'getItem' of undefined
at __WLDAO.getItem (ibmmfpf-preview.js:8285)
at getItemFromMap (ibmmfpf-preview.js:4363)
at Object.__getCachedScopeByResource (ibmmfpf-preview.js:4410)
at __send (ibmmfpf-preview.js:6776)
at sendRequestAsync (ibmmfpf-preview.js:6660)
at WL.ResourceRequest.sendFormParameters (ibmmfpf-preview.js:6577)
at HomePage.webpackJsonp.191.HomePage.login (home.ts:21)
at Object.eval [as handleEvent] (HomePage.html:18)
at handleEvent (core.es5.js:11914)
at callWithDebugContext (core.es5.js:13206)
bound # ibmmfpf-preview.js:1334
View_HomePage_0 # HomePage.html:18
proxyClass # compiler.es5.js:14091
DebugContext_.logError # core.es5.js:13146
bound # ibmmfpf-preview.js:1334
ErrorHandler.handleError # core.es5.js:1144
IonicErrorHandler.handleError # ionic-error-handler.js:63
(anonymous) # core.es5.js:9410
(anonymous) # platform-browser.es5.js:2687
t.invokeTask # polyfills.js:3
onInvokeTask # core.es5.js:4140
t.invokeTask # polyfills.js:3
r.runTask # polyfills.js:3
invoke # polyfills.js:3
ibmmfpf-preview.js:1334 ERROR CONTEXT

MobileFirst 7.1 - WL.Client.invokeProcedure and Java Adapter

We are using MobileFirst 7.1.0.0-MFPF-IF201705051403 version.
I want to know if WL.Client.invokeProcedure and Java Adapter combination works?
I tried invoking Java adapter with WL.Client.invokeProcedure, but it is giving me some error.
Sample Project
Java Adapter
#Path("/users")
public class TestJavaResource {
/* Path for method: "<server address>/CustomAuth-release71/adapters/TestJava/users/username" */
#GET
#Path("username")
public String helloUser(){
return "Hello Username" ;
}
}
Added 2 button in index.html
<div>
<input type="button" id="AuthSubmitButton" onclick="WLResourceRequestExample()" class="formButton" value="WLResourceRequestExample" />
<input type="button" id="AuthCancelButton" onclick="invokeProcedureExample()" class="formButton" value="invokeProcedureExample" />
</div>
main.js
function wlCommonInit(){
}
function invokeProcedureExample(){
var invocationData = {
adapter: "TestJava",
procedure: "users/username",
parameters: []
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : function(res){
console.log(res);
console.log('Success');
},
onFailure : function(res){
console.log(res);
console.log('Fail');},
timeout : 30000
});
}
function WLResourceRequestExample(){
var resourceRequest = new WLResourceRequest("/adapters/TestJava/users/username", WLResourceRequest.GET, 30000);
resourceRequest.send().then(
function(res){
console.log(res);
console.log('Success')
},
function(res){
console.log(res);
console.log('Fail');
}
);
}
When invoked Java Adapter through WLResourceRequest it works.
wlclient init started
worklight.js:5384 before: initOptions.onSuccess
worklight.js:5384 after: initOptions.onSuccess
worklight.js:5384 wlclient init success
test.js:1 test.js was run
main.js:49 klass {responseHeaders: {…}, status: 200, responseText: "Hello Username", errorCode: undefined, errorMsg: "OK", …}
main.js:50 Success
worklight.js:5384 Request [/CustomAuth-release71/apps/services/api/HybridCustomAuth/common/query]
When invoked Java Adapter through invokeProcedure it get error
Request [/CustomAuth-release71/apps/services/api/HybridCustomAuth/common/query]
worklight.js:1193 POST http://10.146.17.219:10080/CustomAuth-release71/apps/services/api/HybridCustomAuth/common/query 401 (Unauthorized)
request # worklight.js:1193
initialize # worklight.js:1151
klass # worklight.js:540
__sendRequest # worklight.js:3678
(anonymous) # worklight.js:3661
(anonymous) # wljq.js:1200
fire # wljq.js:1045
add # wljq.js:1091
(anonymous) # wljq.js:1199
each # wljq.js:656
(anonymous) # wljq.js:1195
Deferred # wljq.js:1256
then # wljq.js:1194
sendRequest # worklight.js:3656
initialize # worklight.js:3522
klass # worklight.js:540
__invokeProcedure # worklight.js:9150
(anonymous) # worklight.js:9193
setTimeout (async)
invokeProcedure # worklight.js:9187
invokeProcedureExample # main.js:32
onclick # index.html:57
worklight.js:5384 Request [/CustomAuth-release71/apps/services/api/HybridCustomAuth/common/query]
worklight.js:5384 Procedure invocation error. Runtime: Procedure TestJava/users/username does not exist.
__log # worklight.js:5384
PUBLIC_API.(anonymous function) # worklight.js:5786
onInvokeProcedureSuccess # worklight.js:9069
onSuccess # worklight.js:3793
onWlSuccess # worklight.js:3766
bound # worklight.js:1029
respondToReadyState # worklight.js:1287
onStateChange # worklight.js:1209
bound # worklight.js:1029
XMLHttpRequest.send (async)
request # worklight.js:1193
initialize # worklight.js:1151
klass # worklight.js:540
__sendRequest # worklight.js:3678
(anonymous) # worklight.js:3661
(anonymous) # wljq.js:1200
fire # wljq.js:1045
add # wljq.js:1091
(anonymous) # wljq.js:1199
each # wljq.js:656
(anonymous) # wljq.js:1195
Deferred # wljq.js:1256
then # wljq.js:1194
sendRequest # worklight.js:3656
handleResendOrSendPostAnswers # worklight.js:4058
removeExpectedAnswer # worklight.js:4027
challengeHandler.submitChallengeAnswer # worklight.js:9888
wl_antiXSRFChallengeHandler.handleChallenge # worklight.js:10655
AbstractChallengeHandler.startChallengeHandling # worklight.js:9784
executeChallenge # worklight.js:9690
checkResponseForChallenges # worklight.js:9592
onWlFailure # worklight.js:3830
bound # worklight.js:1029
respondToReadyState # worklight.js:1287
onStateChange # worklight.js:1209
bound # worklight.js:1029
XMLHttpRequest.send (async)
request # worklight.js:1193
initialize # worklight.js:1151
klass # worklight.js:540
__sendRequest # worklight.js:3678
(anonymous) # worklight.js:3661
(anonymous) # wljq.js:1200
fire # wljq.js:1045
add # wljq.js:1091
(anonymous) # wljq.js:1199
each # wljq.js:656
(anonymous) # wljq.js:1195
Deferred # wljq.js:1256
then # wljq.js:1194
sendRequest # worklight.js:3656
initialize # worklight.js:3522
klass # worklight.js:540
__invokeProcedure # worklight.js:9150
(anonymous) # worklight.js:9193
setTimeout (async)
invokeProcedure # worklight.js:9187
invokeProcedureExample # main.js:32
onclick # index.html:57
main.js:38 klass {responseHeaders: {…}, status: 200, responseText: "/*-secure-↵{"WL-Authentication-Success":{"wl_antiX…],"isSuccessful":false,"warnings":[],"info":[]}*/", responseJSON: {…}, errorCode: "PROCEDURE_ERROR", …}
main.js:39 Fail
worklight.js:5384 Request [/CustomAuth-release71/apps/services/loguploader]
worklight.js:5384 Request [/CustomAuth-release71/apps/services/loguploader]
worklight.js:5983 Client logs successfully sent to the server
worklight.js:5983 Client logs successfully sent to the server
invokeProcedure API is not compatible with JAVA Adapter and that is why you are ending up with the error. It is supported only with JavaScript Adapter.
However WLResourceRequest API supports both JAVA and JavaScript Adapters.

HTTP post working on postman but not on Angular 2

I have a template which (click) triggets addUseCase():
import {Component} from "#angular/core";
import {DataService} from "../shared/data.service";
import {Config} from "../shared/strings";
import {Headers, Http} from "#angular/http";
#Component({
selector: "add",
styleUrls: ["add.component.scss"],
templateUrl: "add.component.html"
})
export class AddComponent {
public title: string;
public body: string;
constructor(private dataService: DataService,
private http: Http) {
this.title = "";
this.body = "";
}
public addUseCase() {
let url = Config.baseUrl + Config.case;
console.log("url", url); // --> http://localhost:3001/case
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let body = JSON.stringify({title:this.title})
this.http.post(url, body, {headers: headers}).map( res => console.log ("res", res), error => console.log("error", error));
}
}
After testing in Postman I get my node/express server correct response. But when I try to use angular HTTP to send I don't get any response at all, no error:
My postman works, but can't make http post of angular 2 work:
Update with errors:
this.http.post(url, body, {headers: headers})
.map(res => res.json()).subscribe(data => console.log(data)); //...errors if any
;
And the errors:
EXCEPTION: Unexpected token W in JSON at position 0ErrorHandler.handleError # core.umd.js:3462next # core.umd.js:6924schedulerFn # core.umd.js:6172SafeSubscriber.__tryOrUnsub # Subscriber.js:223SafeSubscriber.next # Subscriber.js:172Subscriber._next # Subscriber.js:125Subscriber.next # Subscriber.js:89Subject.next # Subject.js:55EventEmitter.emit # core.umd.js:6164onError # core.umd.js:6388onHandleError # core.umd.js:6263ZoneDelegate.handleError # zone.js:236Zone.runTask # zone.js:157ZoneTask.invoke # zone.js:335
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError # core.umd.js:3467next # core.umd.js:6924schedulerFn # core.umd.js:6172SafeSubscriber.__tryOrUnsub # Subscriber.js:223SafeSubscriber.next # Subscriber.js:172Subscriber._next # Subscriber.js:125Subscriber.next # Subscriber.js:89Subject.next # Subject.js:55EventEmitter.emit # core.umd.js:6164onError # core.umd.js:6388onHandleError # core.umd.js:6263ZoneDelegate.handleError # zone.js:236Zone.runTask # zone.js:157ZoneTask.invoke # zone.js:335
core.umd.js:3468 SyntaxError: Unexpected token W in JSON at position 0
at JSON.parse (<anonymous>)
at Function.Json.parse (http://localhost:3000/vendor.bundle.js:11272:59)
at Response.Body.json (http://localhost:3000/vendor.bundle.js:12250:30)
at MapSubscriber.project (http://localhost:3000/main.bundle.js:6202:47)
at MapSubscriber._next (http://localhost:3000/vendor.bundle.js:23914:36)
at MapSubscriber.Subscriber.next (http://localhost:3000/vendor.bundle.js:249:19)
at XMLHttpRequest.onLoad (http://localhost:3000/vendor.bundle.js:12581:43)
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:14882:36)
at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:6930:42)
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:14881:41)
------------- Elapsed: 16 ms; At: Thu Oct 27 2016 08:06:32 GMT-0500 (COT) -------------
at Object.onScheduleTask (http://localhost:3000/polyfills.bundle.js:14537:19)
at ZoneDelegate.scheduleTask (http://localhost:3000/polyfills.bundle.js:14859:50)
at Zone.scheduleEventTask (http://localhost:3000/polyfills.bundle.js:14791:40)
at zoneAwareAddListener (http://localhost:3000/polyfills.bundle.js:15441:15)
at XMLHttpRequest.addEventListener (eval at createNamedFn (http://localhost:3000/polyfills.bundle.js:15544:18), <anonymous>:3:43)
at Observable._subscribe (http://localhost:3000/vendor.bundle.js:12624:23)
at Observable.subscribe (http://localhost:3000/vendor.bundle.js:70:28)
at Observable._subscribe (http://localhost:3000/vendor.bundle.js:128:29)ErrorHandler.handleError # core.umd.js:3468next # core.umd.js:6924schedulerFn # core.umd.js:6172SafeSubscriber.__tryOrUnsub # Subscriber.js:223SafeSubscriber.next # Subscriber.js:172Subscriber._next # Subscriber.js:125Subscriber.next # Subscriber.js:89Subject.next # Subject.js:55EventEmitter.emit # core.umd.js:6164onError # core.umd.js:6388onHandleError # core.umd.js:6263ZoneDelegate.handleError # zone.js:236Zone.runTask # zone.js:157ZoneTask.invoke # zone.js:335
http.umd.js:188 Uncaught SyntaxError: Unexpected token W in JSON at position 0(…)Json.parse # http.umd.js:188Body.json # http.umd.js:1166(anonymous function) # add.component.ts:34MapSubscriber._next # map.js:77Subscriber.next # Subscriber.js:89onLoad # http.umd.js:1497ZoneDelegate.invokeTask # zone.js:265onInvokeTask # core.umd.js:6233ZoneDelegate.invokeTask # zone.js:264Zone.runTask # zone.js:154ZoneTask.invoke # zone.js:335
You never subscribed to the Observable. No request will be made until you do so
this.http.post(url, body, {headers: headers})
.map(res => res.text()).subscribe(data => console.log(data));