TypeError: 在 Next.js 13 中无法读取未定义的属性（读取 ‘headers’）

huangapple
go评论73阅读模式
英文:

TypeError: Cannot read properties of undefined (reading 'headers') in Next Js 13

问题

以下是您的代码的翻译：

我正在使用Next.js 13和Redux Toolkit开发JWT身份验证系统。我有一个Django后端与我的Next.js前端进行通信。问题出在Next.js中的API页面与Redux Toolkit之间的通信，以设置用户登录状态。
以下是我的API页面中的代码：

export async function POST(request) {
    const body = await request.json();
    const { email, password } = body;
    const bodystring = JSON.stringify({
        email,
        password
    });
    console.log(`Posted data is: ${bodystring}`);
    try {
        const apiRes = await fetch(`${API_URL}/api/token/`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: bodystring
        });
        const data = await apiRes.json();
        if (apiRes.status === 200) {
            console.log("登录成功")
            NextResponse.setHeader('Set-Cookie', [
                cookie.serialize(
                    'access', data.access, {
                        httpOnly: true,
                        secure: false,
                        maxAge: 60 * 30,
                        sameSite: 'strict',
                        path: '/api/'
                    }
                ),
                console.log("Access令牌设置成功"),
                cookie.serialize(
                    'refresh', data.refresh, {
                        httpOnly: true,
                        secure: false,
                        maxAge: 60 * 60 * 24,
                        sameSite: 'strict',
                        path: '/api/'
                    }
                ),
                console.log("刷新令牌也成功"),
            ]);
            
            return NextResponse.json({
                success: '成功登录',
                status: 200,
            });
        }
    } catch (error) {
        
    }
}

然后这是我的auth.js，它应该在用户成功登录时分派状态：

export const login = (email, password) => async dispatch => {
    const body = JSON.stringify({
        email,
        password
    });
    dispatch({
        type: SET_AUTH_LOADING
    });
    try {
        const res = await fetch('/auth/login/api', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: body
        });
        alert(`响应是 ${res}`) // 这里有一个问题，请检查API页面
        if (res.status === 200) {
            alert("登录成功")
            dispatch({
                type: LOGIN_SUCCESS
            });
            dispatch(load_user());
        } else {
            alert("登录失败")
            dispatch({
                type: LOGIN_FAIL
            });
        }
    } catch (error) {
        dispatch({
            type: LOGIN_FAIL
        });
    }

    dispatch({
        type: REMOVE_AUTH_LOADING
    });
}

请注意，这只是您代码的翻译部分，不包括问题或其他内容。希望这能帮助您解决问题。如果您需要进一步的帮助，请随时提问。

英文:

I am working on a jwt authentication system in next js 13 with redux toolkit. I have a Django backend and it is communicating with my next js frontend. The problem is in the communication between API page in next js and the redux toolkit to set the user to be logged in.
Here is my code in the api page:

export async function POST(request) {
const body = await request.json();
const { email, password } = body;
const bodystring = JSON.stringify({
email,
password
});
console.log(`Posted data is: ${bodystring}`);
try {
const apiRes = await fetch(`${API_URL}/api/token/`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: bodystring
});
const data = await apiRes.json();
// console.log(`Data is ${data}`)
if (apiRes.status === 200) {
console.log("Login Succesful")
NextResponse.setHeader('Set-Cookie', [
cookie.serialize(
'access', data.access, {
httpOnly: true,
secure: false,
maxAge: 60 * 30,
sameSite: 'strict',
path: '/api/'
}
),
console.log("Access token set succesfully"),
cookie.serialize(
'refresh', data.refresh, {
httpOnly: true,
secure: false,
maxAge: 60 * 60 * 24,
sameSite: 'strict',
path: '/api/'
}
),
console.log("Refresh token sorted too"),
]);
return NextResponse.json({
// res: body
success: 'Logged in successfully',
status: 200,
});
}
} catch (error) {
}
}

And then here is my auth.js that is supposed to dispatch the states when user succesfully logs in:

export const login = (email, password) => async dispatch => {
const body = JSON.stringify({
email,
password
});
// alert(`body is ${body}`) //This alert is showing data hence it`s working
dispatch({
type: SET_AUTH_LOADING
});
try {
const res = await fetch('/auth/login/api', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: body
});
alert(`Response is ${res}`) //There is a problem here. Check the page api
if (res.status === 200) {
alert("Login Succesful")
dispatch({
type: LOGIN_SUCCESS
});
dispatch(load_user());
} else {
alert("Login Failed")
dispatch({
type: LOGIN_FAIL
});
}
} catch (error) {
dispatch({
type: LOGIN_FAIL
});
}
dispatch({
type: REMOVE_AUTH_LOADING
});
}

When the program runs, the auth.js sends an alert Response is [object Response] and then I get the error error TypeError: Cannot read properties of undefined (reading 'headers')
at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:261:61)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) in the console.

答案1

得分: 2

为了修复这个错误，在返回 NextResponse 对象之前，你需要初始化该对象上的 headers 属性。你可以使用 NextRequest 对象上的 headers 属性作为起点来完成这个任务。例如，你可以这样做：

const headers = request.headers;
const newResponse = new NextResponse({
  body: Response,
  headers,
});

return newResponse;
英文:

To fix this error, you need to initialize the headers property on the NextResponse object before you return it. You can do this by using the headers property on the NextRequest object as a starting point. For example, you could do the following:

    const headers = request.headers;
const newResponse = new NextResponse({
body: Response,
headers,
});
return newResponse;

答案2

得分: 0

在进行了几次尝试后，我发现了这个教程1，它解释了如何在 Next 13 中使用。我意识到错误是因为没有在响应中设置头部引起的。在做了一些更改后，这是我的最终代码在 route.js 文件中：

export async function POST(request) {
    const body = await request.json();
    const { email, password } = body;
    const bodystring = JSON.stringify({
        email,
        password
    });
    // console.log(`Posted data is: ${bodystring}`);
    try {
        const apiRes = await fetch(`${API_URL}/api/token/`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: bodystring
        })
        const data = await apiRes.json();
        // console.log(`Data is ${data}`)
        // console.log(`Response status is:${apiRes.status}`)
        if (apiRes.status === 200) {
            console.log("Login Succesful")
            const seralized = [
                cookie.serialize(
                    'access', data.access, {
                    httpOnly: true,
                    secure: false,
                    maxAge: 60 * 30,
                    sameSite: 'strict',
                    path: '/api/'
                }
                ),
                cookie.serialize(
                    'refresh', data.refresh, {
                    httpOnly: true,
                    secure: false,
                    maxAge: 60 * 60 * 24,
                    sameSite: 'strict',
                    path: '/api/'
                }
                )
            ];
            
            const response = {
                success: 'Logged in successfully'
            };
            return new Response(JSON.stringify(response), {
                status: 200,
                headers: { "Set-Cookie": seralized },
            });
        } else {
            // console.log("Login Failed")
            return NextResponse.status(apiRes.status).json({
                error: 'Authentication failed'
            });
            
        }
    } catch (error) {
        
    }
}
英文:

After working on several trials, I found out this tutorial that explains using Next 13. I realized that the error was coming from not setting the headers in the response. After making some changes, here is my final code in the route.js

export async function POST(request) {
const body = await request.json();
const { email, password } = body;
const bodystring = JSON.stringify({
email,
password
});
// console.log(`Posted data is: ${bodystring}`);
try {
const apiRes = await fetch(`${API_URL}/api/token/`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: bodystring
})
const data = await apiRes.json();
// console.log(`Data is ${data}`)
// console.log(`Response status is:${apiRes.status}`)
if (apiRes.status === 200) {
console.log("Login Succesful")
const seralized = [
cookie.serialize(
'access', data.access, {
httpOnly: true,
secure: false,
maxAge: 60 * 30,
sameSite: 'strict',
path: '/api/'
}
),
cookie.serialize(
'refresh', data.refresh, {
httpOnly: true,
secure: false,
maxAge: 60 * 60 * 24,
sameSite: 'strict',
path: '/api/'
}
)
];
const response = {
success: 'Logged in successfully'
};
return new Response(JSON.stringify(response), {
status: 200,
headers: { "Set-Cookie": seralized },
});
} else {
// console.log("Login Failed")
return NextResponse.status(apiRes.status).json({
error: 'Authentication failed'
});
}
} catch (error) {
}
}

huangapple
  • 本文由 发表于 2023年7月18日 00:58:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76706626.html
  • next.js
  • next.js13
  • react-redux
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定