Access-Control-Allow-Origin Request blocked from Localhost:3000 on firebase

Question

I am getting an error on post method of axios for the code:

ERROR :

Access to XMLHttpRequest at 'https://identitytoolkit.googleapis.com/v1/signupNewUser?key=AIzaSyAHO' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CODE:

 const authData = {
            email: email,
            password: password,
            returnSecureToken:true
        }
 axios.post('https://identitytoolkit.googleapis.com/v1/signupNewUser?key=AIzaSyAHOBs', authData)
                .then( response => {
                    console.log(response);
                    dispatch(authSuccess(response.data));
                })
                .catch(err => {
                    console.log(err);
                    dispatch(authFail(err));
                });

Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — zero298, Jul 29 '20 at 14:47

score 0 · Answer 1 · answered Jul 31 '20 at 07:05

I was using different URL for post method, ie

https://identitytoolkit.googleapis.com/v1/signupNewUser?key=[API_KEY]

But the correct URL is same you posted and it even works without modification of headers :

https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]

code snippets :

export const auth = (email, password) => {
    return (dispatch) => {
      dispatch(authStart());
      const authData = {
        email: email,
        password: password,
        returnSecureToken: true,
      };
      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };
      axios.post(
        "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyAHOBsv31rdWYhCr15gRS727QuCnajk2CU",
        authData,
        config
      )
        .then((response) => {
          console.log(response.data);
          dispatch(authSuccess(response.data));
        })
        .catch((err) => {
          console.log(err);
          dispatch(authFail(err));
        });
    };
  };

thank you so much

Happy coding :)

score 0 · Answer 2 · answered Sep 25 '20 at 15:34

I am doing the same course and facing the same error. after a long time, I found that the problem was where we call the function (Auth.js file).

while we handle the onSubmit method we call the onAuth method from mapDispatchToProps like this

const mapDispatchToProps = dispatch =>{
    return {
        onAuth: (email, pass) => dispatch(actions.auth(email,pass))
    }
}

on the course video, the submit handler was like this. that was not correct and indicating an object instead of a string value.

submitHandler = (event) => {
        event.preventDefault();
        this.props.onAuth(this.state.controls.email, this.state.controls.password);
    }

the correct handler would be like this ...

submitHandler = (event) => {
        event.preventDefault();
        this.props.onAuth(this.state.controls.email.value, this.state.controls.password.value);
    }

Access-Control-Allow-Origin Request blocked from Localhost:3000 on firebase

2 Answers2