axiosを用いたAPI通信について

Question

現在サーバー側はnodeでフロントエンドはreactでアプリケーションを開発しています。
ログイン機能を作っているのですが、api通信がうまくいかないです。

フロント側

  import axios from "axios";

  export const startLogin = (user) => async dispatch => {
  const res = await axios.post("/api/users/login", user);
  dispatch({ type: "LOGIN", payload: res.data });
}

サーバー側

app.post("/api/users/login", async (req, res) => {
    var body = _.pick(req.body, ["email", "password"]);
    try {
      var user = await User.findByCredential(body.email, body.password);
      if (user) {
        var token = await user.generateAuthToken();
        res.header("x-auth", token).send(user);
      } else {
        console.log("no user");
      }
    } catch (e) {
      res.status(400).send();
    }
  });

サーバー側でuserの取得は確認済みです。
にも関わらず、 axios の返り値が返ってこない。。　エラーもありません。
正直私の周りの人たちもこれには、お手上げ状態でどうしようもない状態です。
何か些細なことでもいいので、ご教授いただけないでしょうか？
よろしくお願いいたします　????‍♂️

Comments

[HayatoKamono]

「サーバー側でuserの取得は確認済みです。」というのは、質問文に記載されているフロント側のコードによってリクエストをサーバー側で受け取り、「var user = await User.findByCredential(body.email, body.password);」のところでuserをDBから取れているという意味でしょうか？

[coppepan]

ご回答ありがとうございます????‍♂️ その通りでございます。

Answer 1

1

axiosって、クライアント側のaxios.post("/api/users/login", user)の部分ですが、baseURLの設定無しに/api/usersのように相対パスで指定ってできましたっけ？

const api = axios.create({
  baseURL: 'https://xyz.aiueo.com'
});
api.post("/api/users/login", user);

こんな感じでbaseURLの設定が必要なのではなかったでしたか？

2

上記を試してダメな場合、https://jsonplaceholder.typicode.com/の/postsにPOSTでリクエストを質問文に記載のクライアント側のコードで投げたらどういう結果になるでしょうか？

リクエストの投げ方はこの辺を参考にして頂くとして。
https://github.com/typicode/jsonplaceholder#how-to

3

res.header("x-auth", token);
// ここまでは通っているのか再確認!
res.send(user);

既に確認済みなのでしょうが、質問文に記載がないので念のため。

4

axiosのbaseURLを質問文に掲載のコード外のところで設定しているならば、そのURLを再確認。
特に環境変数でbaseURLを動的に設定しているのであれば、そこを含めて再確認。

5

curlコマンドでpostした場合はどうなるでしょうか？

とりあえず考えられるところ、確認してみるところとしては、以上でしょうか。

Comments

[coppepan]

とても丁寧なご回答ありがとうございます????‍♂️

1
package.jsonでproxy設定しています。

"proxy": {
"/api/*": {
"target": "http://localhost:5000"
}
}

2
試してみましたが応答がないようです。

3
通っています。

4
間違いはなさそうです。
5
しっかりレスポンス返ってきますね。 postmanを使っていますがしっかり返ってきてます。

2が少し気になりました。 なぜなのか。。

お忙しい中、本当にありがとうございました。 とても助かります　????‍♂️

[HayatoKamono]

2もcurlなりpostman経由で試してみて下さい。そこでレスポンスかえってくれば、2のサイトは大丈夫ってことになり、質問者さんのフロントのコードに何か問題ありと、切り分け出来ると思います。

[HayatoKamono]

あとは、http://localhost:5000をaxios.postのurl部分にハードコーディングで加えて試したらどうなるかも確認なさってみてください。

[HayatoKamono]

エラーも応答もないというのが気になりますが、一応変なキャッシュが悪さしてないか確認した方が良いかもしれませんね。service workerのキャッシュも含め。

[coppepan]

ご指摘いただいた通り試しましたが、ダメでした。
もしかしたらですが、
私は今 ログインフォームを

```js
render() {
return (
<form onSubmit={this.onSubmit}>
<input
type="text"
placeholder="Email"
autoFocus
value={this.state.email}
onChange={this.onEmailChange}
className="text-input"
/>

<input
type="text"
placeholder="Password"
value={this.state.password}
onChange={this.onPasswordChange}
className="text-input"
/>

<div>
<button className="button">Login</button>
</div>
</form>

```

で書いています。 submitするとページがリロードされてしまいます。
全然関係ないかもしれませんが、formを使ったこの書き方に問題がある可能性はございますか？ ????‍♂️

[HayatoKamono]

その場合、`event.preventDefault();`みたいにリロードしないようにしとかないとダメですね。たぶん、それが原因だと思います。

[HayatoKamono]

`<form onSubmit={this.onSubmit}>`を`<form onSubmit={(event) => this.onSubmit(event)}>`に変えて、onSubmitメソッド内で`event.preventDefault()`を呼べば、大丈夫かとおもいます。

[coppepan]

event.preventDefault()を呼んでいないせいでした。。
本当にありがとうございます！！
私の下手な質問で混乱させてしまい申し訳ありませんでした　????‍♂️

[HayatoKamono]

無事解決して良かったですね！

Answer 2

axiosですが、以外に対応ブラウザが限られています。
未サポートブラウザの場合はaxiosが使えないのでその場合はpolyfill.jsを使用すると解決できます。

Comments

[coppepan]

ご回答ありがとうございます　????‍♂️
chome を使っていて、前回作成したアプリケーションでは、axiosで開発していれ問題ありませんでした。。