英文:
NextJs13 : Method Not Allowed (405 code) while redirecting in Route Handler
问题
NextJs版本：13.4.3
我创建了一个路由处理程序来捕获POST请求。路由处理程序文档：[https://nextjs.org/docs/app/building-your-application/routing/router-handlers]
在这个处理程序中，我只是重定向到我的网站的URL。
代码：
import { type NextRequest } from 'next/server';
import { redirect } from 'next/navigation';
export async function POST(request: NextRequest) {
// 在URL中删除“api”
const newUrl = request.url.replace('/api', '');
redirect(newUrl);
}
错误：
当捕获到POST请求时，我进行了重定向，但我收到了Next 405错误代码
如果我将我的网站的URL替换为另一个随机的URL（比如facebook.com、google.com、whatever.com），就可以正常工作，不会出现错误。
这可能是因为我的网站不支持302重定向吗？
提前感谢！
英文:
NextJs version : 13.4.3
I created a route handler to capture a POST request. Route handler doc : [https://nextjs.org/docs/app/building-your-application/routing/router-handlers]
In this handler, I only redirect to an url of my website.
Code :
import { type NextRequest } from 'next/server';
import { redirect } from 'next/navigation';
export async function POST(request: NextRequest) {
// Delete "api" in the url
const newUrl = request.url.replace('/api', '');
redirect(newUrl);
}
Error :
When a POST request is captured, I'm redirecting but I get a Next 405 error code
If I replace the url of my website by another random url like (facebook.com, google.com, whatever.com), it works perfectly without getting an error.
Could it be because my site does not support 302 redirections?
Thanks in advance !
答案1
得分: 1
这个路由已经生效（下一个版本 v13.4.12）：
import { NextRequest, NextResponse } from "next/server";
export async function POST({ nextUrl: { origin } }: NextRequest) {
/**
* 1)
* NextResponse.redirect 需要一个绝对 URL。
* "origin" 在此处用于获取协议、主机和端口。例如，
* http://localhost:3000/api/foo 的 origin 是 "http://localhost:3000"
*
* 2)
* 状态应该是 303，浏览器将以 GET 方法重定向，参见
* MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/303
*/
return NextResponse.redirect(`${origin}/bar`, { status: 303 });
}
如果您需要更多翻译，请告诉我。
英文:
This route did work (next v13.4.12):
import { NextRequest, NextResponse } from "next/server";
export async function POST({ nextUrl: { origin } }: NextRequest) {
/**
* 1)
* NextResponse.redirect requires an absolute url.
* "origin" is used here to get protocol, host and port. For instance
* origin of http://localhost:3000/api/foo is "http://localhost:3000"
*
* 2)
* status should be 303, browser will redirect with method GET, see
* MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/303
*/
return NextResponse.redirect(`${origin}/bar`, { status: 303 });
}
答案2
得分: 0
可以，这段代码的中文翻译如下：
尝试执行以下操作：
重定向至新的网址('/api', request.url)。
英文:
can you try this:
redirect(new URL('/api', request.url)
答案3
得分: 0
似乎是因为 Next 使用代码 307 和 308 来进行重定向。然而，只有使用代码 302 的重定向才能将 POST 请求转换为 GET 请求。
我尝试过：
Response.redirect('url', 302)
但仍然出现相同的错误。
我不得不使用 Cloudflare worker 才能让它工作。POST 请求被发送到 worker 的 URL，然后 worker 重定向到我的应用程序中的一个 URL（https://developers.cloudflare.com/workers/）。
英文:
It seems to be because Next uses code 307 and 308 for redirects. However, only a redirect with code 302 can transform a POST request into a GET request.
I tried :
Response.redirect('url', 302)
but got the same error.
I had to use a Clouflare worker to get it to work. The POST request is sent to the worker url, and the worker redirects to an url in my application (https://developers.cloudflare.com/workers/)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论