Next.js CORS问题

ar7v8xwq  于 2023-04-11  发布在  其他
关注(0)|答案(1)|浏览(212)

我在使用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的应用程序。为什么会发生这种情况?

ghhaqwfi

ghhaqwfi1#

已解决:在阅读了NextJs文档后,我意识到我需要从NextJs服务器调用并将其传递给客户端,否则CORS问题将持续存在。这就是为什么我可以从Postman应用程序测试API,但不能从另一个前端应用程序工作。因此,在您允许保存api的NextJs应用程序中的交叉源之后,你将不得不从NextJs中的服务器端API目录进行调用,该目录不包含API,并通过调用该路由将其恶意传递到前端。希望,如果你面临这个问题,这是有意义的。

相关问题