Access to XMLHttpRequest at 'https://identitytoolkit.googleapis.com/v1/accounts:/signUp? from origin 'http://localhost:8080' has been blocked

Question

Access to XMLHttpRequest at 'https://identitytoolkit.googleapis.com/v1/accounts:/signUp?key=AIzaSyDvZN5PKdB_b9jX-5rA-t9e3KSxJ-qtkdU' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

Am trying to Create a new user in firebase Using Axios In vue.js and am having the above errors. Here are my code samples.

onSubmit () {
    const formData = {
      email: this.email,
      age: this.age,
      password: this.password,
      confirmPassword: this.confirmPassword,
      country: this.country,
      hobbies: this.hobbyInputs.map(hobby => hobby.value),
      terms: this.terms
    }
    console.log(formData)
    axios.post('signUp?key=AIzaSyDvZN5PKdB_b9jX-5rA-t9e3KSxJ-qtkdU', {
      email: formData.email,
      password: formData.password,
      returnSecureToken: true,
    })
    .then((res) => {
        console.log(res)
    })
    .catch((error) => {
      console.log(error)
    })
  }

here is my default axios instance code.

import axios from 'axios'

const instance = axios.create({
    baseURL: 'https://identitytoolkit.googleapis.com/v1/accounts:'
});

instance.defaults.headers.common['Access-Control-Allow-Headers'] = 'X-Requested-With, content-type';
instance.defaults.headers.common['Access-Control-Allow-Origin'] = 'X-Requested-With, content-type';

export default instance;

Answer 1

CORS is a very annoying error, in fact it's a nightmare.

A way you can get around this is to use a proxy, such as https://cors-anywhere.herokuapp.com.

Example with fetch:

  var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'https://request-url.com'
fetch(proxyUrl + targetUrl)
  .then(blob => blob.json())
  .then(data => {
     var stringed = JSON.stringify(data);
     const res = JSON.parse(stringed);

     // Use res to access JSON
  })
  .catch(e => {
    console.log(e);
    return e;
  });

Of course, this example is just for fetch, but I'm sure you could modify it to work with axios.

If you're using NodeJS, add the line const fetch = require("node-fetch");.