【NextJS】整个项目跨域配置

最新推荐文章于 2025-07-21 21:31:46 发布

转悠的陀螺

最新推荐文章于 2025-07-21 21:31:46 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端 # React 文章标签：前端 node.js next.js

本文链接：https://blog.csdn.net/u011159821/article/details/136170929

Web前端同时被 2 个专栏收录

52 篇文章

订阅专栏

React

26 篇文章

订阅专栏

本文介绍了在Next.js14.1.0版本中，如何配置项目以允许来自其他项目的跨域请求，通过设置`next.config.js`中的asynchronousheaders，允许所有来源访问数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目跨域是指：本项目作为被访问方，由另一个项目对本项目发起fetch等动作获取数据页面数据

实验环境：

next: 14.1.0
react: ^18

配置文件：next.config.[mjs|js|ts]
假定原始范本内容：

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

项目跨域配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
    // @link https://nextjs.org/docs/app/api-reference/next-config-js/headers
	async headers(){
        return [
            {
                source: "/:path*",
                headers: [
                    { key: "Access-Control-Allow-Origin", value: "*" },
                ],
            }
        ]
    }
};

export default nextConfig;