XMLHttpRequest response: preflight request does not pass the access control check:

Question

I am trying to subscribe to a firebase cloud messaging topic with the following http post request:

var data = null;

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

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

xhr.open("POST",   "https://iid.googleapis.com/iid/v1/etLaB36oW1w...nyO_Zc26ZPOFTeNuf58-l6uSoJ9Xs1JRYKfqxsmKkdrR-oX4tQsuS_z5C0/rel/topics/Byfjordskole");
xhr.setRequestHeader("authorization", "key=AAAABlxTfxY:APA91bGE3sa09zq...dZSIVJul3N-y1hMJqAoKngwjC_El3rEuH4_-S2gOxKcdAF67HHhGK7pAWJrhyt8JthJGm_QN6JdXTBow62nYodgFvLncfSniwtBinBgIPLaKpT");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "a3ce72a5-f8ba-99e4-59d6-fe3295b84f6e");

xhr.send(data);

This works when I use Postman, but I get the following error message when I try to use the same code on my javascript app:

XMLHttpRequest cannot load https://iid.googleapis.com/iid/v1/eOEiRqvhD4s:APA91bFFb-uP-Xhf2iD-ALUI_X4M7…gA_YgQgmuib7cCL7UuSdlhUUWmsqwRnkcO2kpAIV_H-_xBPlPd/rel/topics/Eiganesskole. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://sk......e.top' is therefore not allowed access.

Do firebase cloud messaging inhibit me from making this types of request, or is there a solution to this problem? Any help will be highly appreciated.

Another stack overflow thread solved my problem [link](http://stackoverflow.com/a/2067584/6177181) . The solution for me was to wrap the code above in script tags on my index.html file.( To avoid the access control allow origin error.) — Jan Bildus, Dec 14 '16 at 14:29

score 0 · Accepted Answer · edited Mar 28 '18 at 10:05

This Stack Overflow answer solved my problem: https://stackoverflow.com/a/2067584/6177181

The problem was browser security related: and this kept me from making cross domain requests. The Solution was to wrap my code in script tags to avoid this restriction. So instead of doing this request from another javascript file, I simply added the request code in the index.html file like this:

<script>
function subscribe(currentToken){
"use strict"
  let stored_topics = localStorage.getItem("topicsList");
  let topics = JSON.parse(stored_topics);
  for (let i = 0; i < topics.length; i++){
     let data = null;
     let xhr = new XMLHttpRequest();
     xhr.addEventListener("readystatechange", function () {
     if (this.readyState === 4) {
       console.log(this.responseText);
  }
  });
  let body = {};
    let url = "https://iid.googleapis.com/iid/v1/"+currentToken+"/rel/topics/"+topics[i];
    xhr.open("POST", url);
    xhr.setRequestHeader("authorization", "key=AAAABlxTfxY:....QAVfBJI8J0RdZSIVJul3N-y1hMJqAoKngwjC_El3rEuH4_-S2gOxKcdAF67HHhGK....2nYodgFvLncfSniwtBinBgIPLaKpT");
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(data);
   }
  }
</script>

(The currentToken is requested from the firebase cloud messaging API in the same file(index.html)). Follow the instructions on this link :https://firebase.google.com/docs/cloud-messaging/js/receive for information about Firebase cloud messaging.

XMLHttpRequest response: preflight request does not pass the access control check:

1 Answers1