NextJS 在页面中出现错误，但在 API 路径中没有出现错误

Question

我有一个 nextjs 应用程序，当我执行从外部网站获取页面的调用时，如果我通过 API 路由从后端执行此操作，一切正常，但是当我从前端执行此操作时，我会收到 cors 错误。

这是 API 路径中的代码：

async function getPage(url: string) {
    const response = await fetch(url);
    // do stuff
}

export async function POST(req: any) {
    const request = await req.json();
    try {
        await getPage(request.url);
        return NextResponse.json({ status: 200 });
    } catch (err: any) {
        console.log(err);
        return NextResponse.json({}, { status: 400, statusText: 'The website does not exist or is currently down.' });
    }
}

这与前端中抛出错误的代码相同：

async function getPage(url: string) {
    const response = await fetch(url, {
        mode: 'cors',
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    });
    // do stuff
}

const fetchPageFromSite = async () => {
        await getPage(url);
}

我在 useEffect 中使用 fetchPageFromSite。

Answer 1

CORS 必须从后端（您要获取的外部网站）进行管理。

因为该网站的后端需要允许跨源到您的页面或所有页面（*）。

您可以在此处找到有关 CORS 的更多详细信息 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

CORS

的概念 - 跨源资源共享 - 仅适用于客户端。当您从服务器（

api

路线）发送请求时，您从中获取的

url

不知道您网站的来源或域。因此，您从

api

路线的呼叫可以正常工作，不会出现任何错误。

Answer 3

每次遇到 CORS 错误时，都与后端 CORS 配置有关。只需使用 cors() 函数配置您的应用程序即可解决问题。