blocked by CORS policy: No 'Access-Control-Allow-Origin' header in react / node

Question

For some reason I am getting the error

blocked by CORS policy: No 'Access-Control-Allow-Origin' header

from my code here:



import * as firebase from "firebase";

function FreshMail() {
  const db = firebase.firestore();
  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      let user = firebase.auth().currentUser.uid;

      let cityRef = db.collection("Users").doc(user);
      let getDoc = cityRef
        .get()
        .then((doc) => {
          if (!doc.exists) {
            console.log("No such document!");
          } else {
            console.log("Document data:", doc.data());

            var request = require("request");

            let data = doc.data();

            var dataString = {
              userE: data.UserEmailAddress,
              userP: data.UserEmailPassword,
              userH: data.UserEmailHost,
              userPort: data.UserEmailPort,
            };

            var headers = {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "GET, PUT, POST, OPTIONS",
              "Access-Control-Allow-Headers": "*",
            };

            var options = {
              url:
                "https://us-central1-zenmail-bfd57.cloudfunctions.net/***",
              method: "POST",
              body: dataString,
              headers: headers,
            };

            function callback(error, response, body) {
              if (!error && response.statusCode == 200) {
                console.log(body);
              }
            }

            request(options, callback);
          }
        })
        .catch((err) => {
          console.log("Error getting document", err);
        });
    }
  });
}

export default FreshMail;

I have tried adding the access control allow origin to the header but even that does not seem to be working. I have tried running it from localhost and from my firebase hosting and am getting the error on both. Any help would be appreciated!

For some reason - yes, the cross origin resource you're trying to access doesn't want you to access it ... and adding reqponse headers into your request won't fix that ... cors is controlled by the server, not the client - though, this code is running in nodejs? so that is odd — Jaromanda X
firstly, is this code in a browser or in nodejs? if browser, then you can't bypass CORS that easily - just use your server to make the request to the remote server — Jaromanda X
Its running in the browser, sending data to one of my firebase functions. This function runs onclick of a button in my react app. I could run most of this in the function but I would still need to send the UID which would still lead to this issue meaning I do have to find a solution for this I think. — CodingIsFun33
https://us-central1-zenmail-bfd57.cloudfunctions.net/*** is cross origin - so it's that server that needs to ALLOW such access — Jaromanda X

csb00 csb00 · Accepted Answer · 2020-04-09T04:34:26

I had the same issue and this article might help you out with that

https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

I used https://cors-anywhere.herokuapp.com/https://nameofapisite.com and it worked fine for me

blocked by CORS policy: No 'Access-Control-Allow-Origin' header in react / node

1 Answers