fcm api gives 'Access-Control-Allow-Credentials' error

1
votes

Firebase Cloud Messaging Server api is giving preflight error

 $http({
  method: 'POST',
  url: 'https://fcm.googleapis.com/fcm/send',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'key=AIzaSyAZ-uI5....'
  },
  data: notificationData
}).then(function successCallback(response) {
   console.log('notification sent')
}, function errorCallback(response) {
  console.log('failed to send notification')
});


var notificationData = {
  "to": "dR3179CIBdk:APA91bGqvNV0a9x0khUn2rX3c403CsezB9UjPyVsmnGQXMsxruo7r8N2lravIhx6lTG_FLXwXRposoxxcSpb5Rnj84lN0o2B-a2_tzxWkdc40HlEb0kNVC25Y3V3-d2c6WUHOeNo3_UM",
  "data": {
    "productid": '57039b3ae4b07b473966ec8c',
    "title": "Off Upto 70% hello.com",
    "flashSaleId": "58c2ae6038d991a47c27asdw"
  },
  "notification": {
    "sound": "default",
    "title": "Off Upto 70% Olivetheory.com",
    "body": "Heavy Discounts on betsheets,Chairs,Beds,Pillows"
  }
}

Ugly preflight ERROR

XMLHttpRequest cannot load https://fcm.googleapis.com/fcm/send. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Note : I dont want to disable chrome security.

Don't know what wrong i am doing

2
angularjsfirebasexmlhttprequestcorsfirebase-cloud-messaging

2 Answers

0
votes

SOLUTION 1 CREATE SIMPLE HTTP REQUEST IN CORE LANGUAGE jquery,javascript or node

var notificationData = {
  "to": "dR3179CIBdk...",
  "data": {
    "mrp": 5000,
    "retailPrice": 3000
  },
  "notification": {
    "color": "#FF0000",
    "title": "Off Upto 70% yofunky.com"
  }
}

$.ajax({
    url: 'https://fcm.googleapis.com/fcm/send',
    type: 'post',
    data: JSON.stringify(notificationData),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': ios_Legacy_Server_Key
    },
    dataType: 'json',
    success: function (data) {
      console.info(data);
    }
  });

Temporary Solution : Send SIMPLE HTTP REQUEST SIMPLE means no options request, and no extra headers.

Cons : As using angular then after firing this http request i have to use $apply() every where

SOLUTION 2

As in above code ui hits http request to https://fcm.googleapis.com/fcm/send , Here you can hit this http request from server which should not give any error (possible hitting simple request)

-1
votes

This works when I removed withCredentials attribute. Make note of postModel, it is your notification body to send which is in the format of

{ "data": {
"score": "5x1",
"time": "15:10"
 },
"to" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
 }

Here is the JS code for sending request to fcm.

var data = JSON.stringify(postModel);

  var xhr = new XMLHttpRequest();
  //xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      console.log(this.responseText);
    }
  });

  xhr.open("POST", "https://fcm.googleapis.com/fcm/send");
  xhr.setRequestHeader("Authorization", "key=YOUR SERVER API KEY");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(data);