質問編集履歴

1

リクエスト時のヘッダー内容と、リクエストを送るフロントエンドのaxiosを追加しました

2022/01/15 01:57

投稿

kiyomasa
kiyomasa

score40

test CHANGED
File without changes
test CHANGED
@@ -114,4 +114,73 @@
114
114
 
115
115
  思いつく原因がもうなく、他アドバイスなどいただけると幸いです。
116
116
 
117
+ ### 追記
118
+ リクエスト時のヘッダー内容
117
119
 
120
+ ```
121
+ Provisional headers are shown
122
+ Learn more
123
+ Accept: application/json, text/plain, */*
124
+ Content-Type: application/json
125
+ Referer: https://フロントアプリ名/
126
+ sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
127
+ sec-ch-ua-mobile: ?1
128
+ sec-ch-ua-platform: "Android"
129
+ User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Mobile Safari/537.36
130
+ ```
131
+
132
+ フロント側のaxios通信部分
133
+
134
+ ```
135
+ /* eslint-disable react-hooks/exhaustive-deps */
136
+ import { useCallback, useState } from "react";
137
+ import axios from "axios";
138
+ import { useHistory } from "react-router-dom";
139
+
140
+ import { useMessage } from "./useMessege";
141
+ import { useLoginUser } from "./useLoginUser"
142
+
143
+ import { loginURL } from '../urls/index'
144
+
145
+ export const useAuth = () => {
146
+ const history = useHistory();
147
+ const { showMessage } = useMessage();
148
+ const { setLoginUser } = useLoginUser();
149
+
150
+ const [loading, setLoading] = useState(false);
151
+
152
+ const login = useCallback((data) => {
153
+ setLoading(true);
154
+ //ローディングアイコンをtrueに
155
+ axios.post(loginURL,
156
+ {
157
+ user: {
158
+ email: data.email,
159
+ password: data.password,
160
+ }
161
+ },
162
+ { withCredentials: true }
163
+ ).then(response => {
164
+ if (response.data.logged_in) {
165
+ setLoginUser(response.data)
166
+ showMessage({ title: "ログインしました", status: "success" });
167
+ const user_id = response.data.user.id
168
+ history.push(`/users/${user_id}`);
169
+ }
170
+ // 認証できなかった時のエラー
171
+ else if (response.data.status === 401) {
172
+ showMessage({ title: `${response.data.errors}`, status: "error" });
173
+ }
174
+ // うまくpostできなかった時のエラー
175
+ }).catch((e) => {
176
+ showMessage({ title: "認証できませんでした。再度リロードなどを行いやり直して下さい", status: "error" });
177
+ setLoading(false);
178
+ })
179
+ }, [history, showMessage, setLoginUser]);
180
+
181
+ return { login, loading };
182
+ };
183
+
184
+ ```
185
+
186
+