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

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));
});

Answer 1

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 :)

Answer 2

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);
}