-1

I am trying to use firestore (which is new for me) in javascript but I am facing a CORS error and I am a little bit stucked. I just want my js code to send data from input to firebase firestore. But CORS access isn't allowing me to do this. And no data is written in the firebase firestore. There are only CORS errors in the console. I would be glad if anyone helps me with this issue

<form id="contactForm" action="#" class="bg-light p-4 p-md-5 contact-form">
  <div class="form-group">
    <input type="text" id="name" class="form-control" placeholder="Your Name">
  </div>
  <div class="form-group">
    <input type="text" id="email" class="form-control" placeholder="Your Email">
  </div>
  <div class="form-group">
    <input type="text" id="subject" class="form-control" placeholder="Subject">
  </div>
  <div class="form-group">
    <textarea name="" id="message" cols="30" rows="7" class="form-control" placeholder="Message"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" onclick="writeData()" value="Send Message" class="btn btn-primary py-3 px-5">
  </div>
</form>

<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-storage.js"></script>

<script>
  var firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXXXXXX",
    measurementId: "XXXXXXXXXXXXXXXXXXXXX"
  };
  firebase.initializeApp(firebaseConfig);
  // Initialize Firebase

  firebase.analytics();


  var db = firebase.firestore();

  function writeData() {
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let subject = document.getElementById("subject").value;
    let message = document.getElementById("message").value;


    db.collection("FormMessage").set({
        name: name,
        email: email,
        subject: subject,
        message: message
      })
      .then(function () {
        console.log("Document successfully written!");
      })
      .catch(function (error) {
        console.error("Error writing document: ", error);
      });

  }
</script>
MefAldemisov
  • 867
  • 10
  • 21
Oybek Ikramov
  • 23
  • 1
  • 6
  • 2
    Which CORS errors *exactly*? –  Jul 13 '20 at 18:02
  • http://localhost:63342' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. – Oybek Ikramov Jul 13 '20 at 18:06
  • Look here: https://firebase.google.com/docs/hosting/deploying#test-locally –  Jul 13 '20 at 18:10
  • thanks for that link, but i connected firebase with cdn , and don't know where to write this code--- firebase serve --only functions,hosting – Oybek Ikramov Jul 13 '20 at 18:44
  • You need to install node, then install the firebase cli and set up a project: https://firebase.google.com/docs/hosting#implementation_path –  Jul 13 '20 at 20:35
  • 1
    Have you been able to solve this issue? If no check [this thread](https://stackoverflow.com/questions/49856240/unable-to-test-locally-using-firebase-due-to-cors-restriction). If you just need it for testing disabling cors check in your browser should suffice. – Emil Gi Jul 15 '20 at 14:25

1 Answers1

1

For me, i got this error in my vite dev server with vue. This was because of my https everywhere extension. If you have an extension like this, try to disable it.

ahsan-a
  • 204
  • 3
  • 9