Next.js 配置接口跨域代理转发

最新推荐文章于 2024-12-01 19:53:14 发布

原创

最新推荐文章于 2024-12-01 19:53:14 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Next.js #跨域 #代理

本文介绍如何在使用 create-next-app 创建的 Next.js 项目中设置接口跨域代理转发。通过引入 express 和 http-proxy-middleware 库，创建 server.js 文件并配置相关代码，实现以 /api/ 开头的所有接口请求的转发。

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

使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能。
先安装好 express 和 http-proxy-middleware

yarn add express http-proxy-middleware

在项目根目录下新建 server.js 文件，写入以下代码

// server.js
const express = require('express')
const next = require('next')
const proxyMiddleware = require('http-proxy-middleware')

const devProxy = {
   
   
    '/api': {
   
   
        target: 'http://localhost:8000', // 端口自己配置合适的
        pathRewrite: {
   
   
            '^/api':