下一页.js (v13) |重写和重定向在中间件中不起作用。-> 当从页面(运行)但从 api(不起作用)时需要

Question

我正在使用Next.js v13进行编码。

您可以通过查看本文末尾找到我编写的代码。

工作原理:1-我抛出请求和值的服务，使取回与客户端组件。

2-服务接收到传入的请求并将其发送给API。

3-请求通过一个"中间件"。在进入api

之前3.1 -如果中间件允许请求，到达API

3.2 -如果中间件不允许请求，它执行必要的操作，并使用NextResponse.redirect(…)重定向到另一个页面。

我的问题:当我转到一个正常的页面时，我触发我的中间件，这个NextResponse.redirect(…)操作工作正常。然而!不幸的是，当我向api发送请求时，它不起作用。

api请求中的读取操作返回数据为res.json()。

和我返回一个重定向从中间件与NextResponse.redirect(…)。

我认为这个问题与此有关，但如果您能检查一下并让我知道，我会很感激的。

请遵循步骤。page.js祝辞服务(postAPI)比;中间件的在API

page.js (onSubmit时运行)

await postAPI("/auth/sendVerifyEmail", values).then((data) => {
if(!data){
toast.error("Bir hata oluştu. Lütfen daha sonra tekrar deneyiniz.");
setIsloading(false);
return;
}
else{
if (data.status === "success") {
setIsAccessing(true);
setIsloading(false);
toast.success(data.message + " Lütfen Bekleyin, yönlendiriliyorsunuz...");

//Bilgi verir ve 5 saniye sonra login sayfasına yönlendirir.
const timeOut = setInterval(() => {
if(data.role){
setIsloading(false);
router.push(`/auth/login/${data.role.toLowerCase()}`);
}
else{
setIsloading(false);
router.push(`/`);
}


clearInterval(timeOut);
}, 4000);

} else {
toast.error(data.message);
setIsloading(false);
}
}
});

service(postAPI)在onsubmit from page.js时运行

export async function postAPI(URL, body = "", method="POST", headers = {'Content-Type': 'application/json'}){
try {
const data = await fetch (`${process.env.NEXT_PUBLIC_API_URL + URL}`,{
method: method,
headers: headers,
body: JSON.stringify(body)

}).then(res => res.json())
.catch(err => console.log(err))

return data;
} catch (error) {
throw new Error(`API request failed: ${error.message}`);
}        

}

middleware.js(当service post到api时运行中间件)

export async function middleware(req, res, next) {

const { pathname } = new URL(req.url) || new URL(req.nextUrl);
console.log("pathname : " + pathname)
console.log(data);
if (
// istek gidecek sayfaları burada belirledik. eğer bu sayfalara istek giderse kontrol edilecek
(pathname.startsWith('/api/auth/verifyEmail')) && (req.method === "POST")
) {
//triggered on api request but not working!
//triggers and works for the page!
return NextResponse.rewrite(targetUrl);
}
else{
// kullanıcı limiti aşmadı ise isteği gönderir.
return NextResponse.next();
}
}
}

strong>仅限api:操作发送给api的值并返回对象

像这样:return res.status(401).json({status: "error", error: error?.message, message: error?.message});

在这些结构中，我不能在api请求中使用重写或重定向结构。

只有一个错误，我得到了回房:"SyntaxError:意外标记' "<'， ">

我想这是因为我返回了res.json在服务部分，但当我删除它我的问题仍然没有解决…

Answer 1

正如@LajosArpad所说，我遇到这个问题是因为我没有正确使用作为响应返回的结构。