解決済
Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築 redux について
DRF
Next.js
初心者
2023/02/25 21:25
実現したいこと
Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築でチュートリアルを勧めているものの、Chapter20の
認証チェックでerrorが出て進めないのです。
発生している問題
アカウント登録画面で、アカウント情報を入力して送信ボタンを押すと、
POST http://localhost:3000/api/account/register 500 (Internal Server Error) とerrorが出ています。
詳細をみると、
action/auth.jsx の fetch('/api/account/register', がエラーのようです。
http://localhost:3000/api/account/registerにアクセスすると、
{"error":"Method GET not allowed"} が表示されます。
ソースコード
import {
// アカウント登録
REGISTER_SUCCESS,
REGISTER_FAIL,
// 読み込み中
SET_AUTH_LOADING,
REMOVE_AUTH_LOADING,
} from './types'
// アカウント登録
export const register = (name, email, password) => async (dispatch) => {
dispatch({
type: SET_AUTH_LOADING,
})
const body = JSON.stringify({
name,
email,
password,
})
try {
const res = await fetch('/api/account/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: body,
})
if (res.status === 200) {
dispatch({
type: REGISTER_SUCCESS,
})
} else {
dispatch({
type: REGISTER_FAIL,
})
}
} catch (err) {
dispatch({
type: REGISTER_FAIL,
})
}
dispatch({
type: REMOVE_AUTH_LOADING,
})
}
自分で試したこと
ソースコードを見返しても間違っているところは見られませんでした。
postman でAPI動作確認をしたところ、問題はなかったです。
補足情報
redux 設定の時に、createStoreが非推奨なので、
reduxtoolkit を使用しています。公式ページを観ながら作りました。
もしかするとこれが原因かもしれないです。
src/app/authSlice.jsx
import { createSlice } from "@reduxjs/toolkit";
import {
// アカウント登録
REGISTER_SUCCESS,
REGISTER_FAIL,
// 読み込み中
SET_AUTH_LOADING,
REMOVE_AUTH_LOADING,
} from 'actions/types'
const initialState = {
loading: false,
}
export const authSlice = createSlice({
name:'auth',
initialState,
reducers: {
increment: (state = initialState, action) =>{
const { type, payload } = action
switch (type) {
// アカウント登録
case REGISTER_SUCCESS:
return {
...state,
}
case REGISTER_FAIL:
return {
...state,
}
// 読み込み中
case SET_AUTH_LOADING:
return {
...state,
loading: true,
}
case REMOVE_AUTH_LOADING:
return {
...state,
loading: false,
}
default:
return state
}
}
}
})
export const { increment } = authSlice.actions
export default authSlice.reducer
src/app/store.jsx
import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'
export const store = configureStore({
reducer: {
auth: authSlice,
},
})
間違っている点があれば、是非教えていただけると助かります。
回答 8件
回答するにはログインが必要です
test2が表示されているので、POSTでコールされてますね。
それでは、DjangoへのAPIでエラーが起こっているのでしょうか。
下記のようにconsole.logを入れてみてください。
try {
console.log("Django APIコール前")
console.log("body", body)
const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: body,
})
console.log("Django APIコール後")
動いて良かったです。
incrementという名前は変更したほうが良いかと思いますが、動いていれば問題ないです。
返信ありがとうございます。
結果は以下の通りです。
試しに .env を
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
にしてみたところ、user登録することができました。
本当にありがとうございます。。。。
console.log() でエラーを見つける大切さが身に染みてわかりました。。。。
ちなみになんですけど、
最初に投稿した、redux toolkit の書き方はあれで合っているのでしょうか？
1
すいません。間違えました。
不思議ですね。
POSTでコールしていれば、pages/api/account/register.jsに入るはずです。
下記のようにconsole.logを入れてみてください。
actions/auth.js
try {
console.log("test1")
const res = await fetch('/api/account/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: body,
})
console.log("test3")
pages/api/account/register.js
export default async (req, res) => {
console.log("req.method", req.method)
if (req.method === 'POST') {
console.log("test2")
お手数おかけしております。
console.log()で確認したところ、このようになりました。
#自分でやってみたこと--------
試しに、fetch('http://127.0.0.1:8000/api/auth/register/
でdjangoAPIにコールしてみたところ、
user登録することができました。
ですが、エラーコードが出て、
POST http://localhost:3000/api/account/register 400 (Bad Request)
が出たのですが、この段階では関係ないですかね？
送信ボタンを押したときに、他にエラーメッセージが表示されてますでしょうか？
もしエラーがなければ、どこまで正常に動いているか確認してみてください。
pages/api/account/register.js、reducers/auth.jsにconsole.logを仕込んで確認します。
localhost:3000/api/account/registerにはPOSTでしかアクセスできないようになっているので、GETでアクセスした場合にエラーが発生するのは正常です。
確認したところ、
pages/api/account/register.js にconsloe.logが反応しないので、ここで止まっているようです。
それこそ、req.methodがPOSTではない状態になっているため処理ができないように感じます。
POST として送っているはずなのになぜ、違うのでしょうか。。