fcm api 给出“访问控制允许凭据”错误

Question

Firebase Cloud Messaging Server api 给出预检错误

 $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"
  }
}

丑陋的预检错误

XMLHttpRequest 无法加载 https://fcm.googleapis.com/fcm/send。对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“包含”时，该值必须为“真”。因此，Origin 'http://localhost:8080' 不允许访问。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

注意：我不想禁用 chrome 安全性。

不知道自己做错了什么

Answer 1

这在我删除 withCredentials 属性时有效。 记下 postModel，它是您要发送的通知正文，格式为

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

这里是向fcm发送请求的JS代码。

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);

Answer 2

解决方案 1 在核心语言 jquery、javascript 或节点中创建简单的 HTTP 请求

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);
    }
  });

临时解决方案：发送 SIMPLE HTTP REQUEST SIMPLE 表示没有选项请求，也没有额外的标头。

缺点：由于使用 angular，然后在触发此 http 请求后，我必须在每个地方都使用 $apply()

解决方案 2

如上代码 ui 将 http 请求发送到 https://fcm.googleapis.com/fcm/send ，在这里您可以从服务器发送此 http 请求，该请求不会出现任何错误（可能会触发简单请求）