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

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;

And the question is?

Andreas
– Andreas

2020-12-05 12:48:05 +00:00
Commented Dec 5, 2020 at 12:48 — Andreas
– Andreas, Commented Dec 5, 2020 at 12:48

Steel · Accepted Answer · 2020-12-05 12:44:42Z

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

answered Dec 5, 2020 at 12:44

Steel

744 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andreas Over a year ago

"CORS is a very annoying error, in fact it's a nightmare" - What? CORS is a way how the owner of a resource can limit the access to it. How is this an error? Just because you cannot grab anything you want without permission?

Steel Over a year ago

It is annoying when you own the resource / have access to it and it won't work.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related