0

Using Ionic 2 and angular http i am attempting to make http post request to https://fcm.googleapis.com/fcm/send, the request tested with postman works perfectly fine

this question is a follow-up question to my this question :

HTTP.post to FCM Server not working

console tells error to be The request was missing an Authentification Key (FCM Token). Please, refer to section "Authentification" of the FCM documentation, at firebase.google.com/docs/cloud-messaging/server. Error 401

the code for http request is 

import { Http, Headers } from '@angular/http';

......

constructor(public http: Http) { }

sendPushNotification(deviceId: string) {
  let url = 'https://fcm.googleapis.com/fcm/send';
  let body = 
   {
     "notification": {
         "title": "Notification title",
         "body": "Notification body",
         "sound": "default",
         "click_action": "FCM_PLUGIN_ACTIVITY",
         "icon": "fcm_push_icon"
     },
     "data": {
         "hello": "This is a Firebase Cloud Messagin  hbhj g Device Gr new v Message!",
     },
     "to": "device token"
   };

  let headers: Headers = new Headers();
  headers.append('content-type', 'application/json');
  headers.append('Authorization', 'key='+someKey);

  this.http.post(url, body, headers).map(response => {
    return response;
  }).subscribe(data => {
     //post doesn't fire if it doesn't get subscribed to
     console.log(data);
  });
}

headers from chrome console are as follows :

General Headers

Request URL:https://fcm.googleapis.com/fcm/send Request Method:POST Status Code:401 Remote Address:[2404:6800:4009:807::200a]:443

Response headers

access-control-allow-origin:http://localhost:8100 access-control-expose-headers:Content-Encoding,Content-Length,Content-Type,Date,Server alt-svc:quic=":443"; ma=2592000; v="35,34" cache-control:private, max-age=0 content-encoding:gzip content-length:260 content-type:text/html; charset=UTF-8 date:Thu, 08 Dec 2016 12:36:14 GMT expires:Thu, 08 Dec 2016 12:36:14 GMT server:GSE status:401 x-content-type-options:nosniff x-frame-options:SAMEORIGIN x-xss-protection:1; mode=block

Request Headers

Request Headers Provisional headers are shown content-type:application/json Origin:http://localhost:8100 Referer:http://localhost:8100/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.100 Safari/537.36

Request Payload {notification: {title: "Notification title", body: "Notification body", sound: "default",…},…} data : {hello: "This is a Firebase Cloud Messaging Device new Message!"} notification : {title: "Notification title", body: "Notification body", sound: "default",…} to : "/topics/cooking"

Community
  • 1
  • 1
dhruv
  • 151
  • 2
  • 3
  • 14
  • Can you give us the Header that is actually sent from you borwser? It should be in DevTools (F12 for chrome) network tab. Obfuscate the key of course before posting it in your question. – Athanasios Kataras Dec 08 '16 at 12:30
  • request headers are : Provisional headers are shown content-type:application/json Origin:http://localhost:8100 Referer:http://localhost:8100/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.100 Safari/537.36 – dhruv Dec 08 '16 at 12:37
  • So the Authorization.append(key, value) failed for some reason and since the key was not sent, you get the error. Is the someKey value defined? Try adding you FCM key manually in the Code and see waht happens and then append from the variable. – Athanasios Kataras Dec 08 '16 at 12:41
  • headers.append('Authorization', 'key=AAAA****bHw3*****'); i am using it like this ... – dhruv Dec 08 '16 at 12:43
  • results are same even when calling from variable – dhruv Dec 08 '16 at 12:49
  • Look at this here: http://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debugger Seems like your request is being blocked in chrome but in this question you can find out why. – Athanasios Kataras Dec 08 '16 at 12:49
  • is it possible to base64 encode header as one of the reasons is header being too long ? – dhruv Dec 08 '16 at 14:07
  • No it is not. I'm not aware of it being done. The web server should be aware of the encoding and it is forbidden to send encoded data in the http protocol. – Athanasios Kataras Dec 09 '16 at 14:43
  • i was able to make provisional headers go away by adding retry and some delay with this code , .retryWhen(error => error.delay(500)).timeout(2000, new Error('delay exceeded')) but request headers still don't contain my authorization header – dhruv Dec 12 '16 at 04:52

1 Answers1

2

got this working by adding headers as requestoptions , 

let headers: Headers = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'key='+this.someKey
});
let options = new RequestOptions({ headers: headers });
dhruv
  • 151
  • 2
  • 3
  • 14