My attempt to create a new user in Firebase using Axios in Vue.js is resulting in an error message regarding CORS policy. The specific error states: "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'
In response to this issue, I have included my code samples below:
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)
})
}
In addition, here is the snippet of code for my default axios instance configuration:
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;