我在使用Next.js API时遇到了一个奇怪的情况。
我有一个名为Javascript生态系统的网站。我可以在localhost:3000和生产环境中发出请求,没有任何问题。
如果我使用Postman来测试请求,它就像预期的那样工作。
这就是问题所在。
我有一个名为www.example.com的个人网站reynaldo.website,我试图使用JavaScript生态系统的订阅API在我的个人网站中提交新的订阅者。
我得到了CORS跨源错误。这很奇怪,因为我可以在Javascript生态系统和Postman中的localhost中发出请求,但不能在个人网站中发出请求。
我在包含该模块的Next.js应用中添加了自定义头文件。
module.exports = {
async headers() {
return [
{
// matching all API routes
source: "/api/(.*)",
headers: [
{ key: "Access-Control-Allow-Origin", value: "*" },
{
key: "Access-Control-Allow-Methods",
value: "GET,DELETE,POST,PUT"
}
]
}
];
}
};
然而,我仍然无法从另一个应用程序发出请求,而不是包含API的应用程序。为什么会发生这种情况?
1条答案
按热度按时间ghhaqwfi1#
已解决:在阅读了NextJs文档后,我意识到我需要从NextJs服务器调用并将其传递给客户端,否则CORS问题将持续存在。这就是为什么我可以从Postman应用程序测试API,但不能从另一个前端应用程序工作。因此,在您允许保存api的NextJs应用程序中的交叉源之后,你将不得不从NextJs中的服务器端API目录进行调用,该目录不包含API,并通过调用该路由将其恶意传递到前端。希望,如果你面临这个问题,这是有意义的。