axiosでpostした時にError: Request failed with status code 400のエラーが出る

Question

前提・実現したいこと

Firebaseを使って新規登録の処理を実装したい。

発生している問題・エラーメッセージ

Uncaught (in promise) Error: Request failed with status code 400

該当のソースコード

↓axios-for-auth.js

import axios from 'axios';

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

export default instance;

↓main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App);
app.use(router);
app.use(VueAxios, axios)
app.mount('#app');

<template>
  <div>
    <h1>新規登録画面</h1>
    <form>
      <ul>
        <li class="user-name">
          <label for="user-name">ユーザー名</label>
          <input type="text" id="user-name" placeholder="UserName" v-model="username" />
        </li>
        <li class="email">
          <label for="email">メールアドレス</label>
          <input type="email" id="email" placeholder="E-mail" v-model="email" />
        </li>
        <li class="password">
          <label for="password">パスワード</label>
          <input type="password" id="password" placeholder="PassWord" v-model="password" />
        </li>
      </ul>
    </form>

    <button @click="register">新規登録</button>
    <br />
    <router-link to="/" tag="a">ログインはこちらから</router-link>
  </div>
</template>


<script>
import axios from '../axios-for-auth.js';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    };
  },
  methods: {
    register() {
      axios
        .post('/accounts:signUp?key=myKey', {
          email: this.email,
          password: this.password,
          returnSecureToken: true
        })
        .then(response => {
          console.log(response);
        });
      this.username = '';
      this.email = '';
      this.password = '';
    }
  }
};
</script>

2時間ぐらいエラーと格闘しましたが解決できませんでした。
どなたか同じような経験がある方がいらっしゃいましたら教えていただけると幸いです????‍♂️

Comments

[eneko0513]

key=の内容見えてしまっていますがこれは大丈夫ですか？

[F_Yohei]

わっ！！ありがとうございます！！

後で消そうと思っていた部分を忘れてそのままにしてしまってました。

セキュリティの部分でかなりヤバかったです。。。
気をつけます????‍♂️

[mikkame]

https://teratail.com/questions/history-questions/317568
編集履歴からみえるから、そのキーは失効させた方がいいです

[F_Yohei]

編集履歴が見えちゃうんですね。汗
ご指摘頂きありがとうございます????‍♂️
プロジェクトを削除しました。

Answer 1

こちら解決したので締め切らせていただきます。

axiosを使用せずともfirebaseのみで実装できました。