nextjs+react项目如何代理本地请求解决跨域

在 Next.js + React 项目中解决本地开发跨域问题，可以通过以下几种方式实现代理请求：

方案1：使用 Next.js 内置的 Rewrites 功能（推荐）

1. 修改 next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*', // 匹配所有/api开头的请求
        destination: 'http://localhost:5000/api/:path*', // 代理目标地址
      },
      {
        source: '/uploads/:path*',
        destination: 'http://localhost:5000/uploads/:path*',
      }
    ]
  }
}

module.exports = nextConfig

2. 前端直接请求相对路径

// 直接请求 /api/users（会被自动代理到 http://localhost:5000/api/users）
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data))

优点：

• 零配置前端代码
• 无跨域问题（浏览器看到的是同源请求）
• 支持所有 HTTP 方法

方案2：自定义 API 路由（Next.js Serverless Functions）

1. 创建代理 API 路由

// pages/api/proxy/[...path].js
export default async function handler(req, res) {
  const { path } = req.query
  const targetUrl = `http://localhost:5000/${path.join('/')}`

  try {
    const response = await fetch(targetUrl, {
      method: req.method,
      headers: req.headers,
      body: req.method !== 'GET' ? JSON.stringify(req.body) : undefined
    })
    const data = await response.json()
    res.status(response.status).json(data)
  } catch (error) {
    res.status(500).json({ error: 'Proxy error' })
  }
}

2. 前端调用

fetch('/api/proxy/users')
  .then(res => res.json())
  .then(data => console.log(data))

适用场景：

• 需要自定义请求处理逻辑
• 后端接口需要鉴权等复杂处理

方案3：配置开发服务器代理（create-next-app 自带）

1. 修改 package.json

{
  "proxy": "http://localhost:5000"
}

注意：Next.js 9.5+ 已移除此功能，需使用方案1或方案2

方案4：使用 http-proxy-middleware

1. 安装依赖

npm install http-proxy-middleware

2. 创建 src/setupProxy.js (需 react-scripts)

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    })
  )
}

适用场景：

• 与 Express 等 Node.js 服务集成开发时

方案5：CORS 配置（需后端配合）

如果必须直接请求后端接口，让后端添加：

// Express 示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

各方案对比

最佳实践建议

1. 开发环境：使用方案1（Rewrites），配置最简单
2. 生产环境：
   • 同域部署：无需代理
   • 跨域部署：方案2（API路由）或让后端开启CORS
3. 复杂场景：结合方案1和方案2，部分接口走rewrites，特殊接口走API路由

调试技巧

1. 查看实际请求：

   // 在next.config.js的rewrites中添加日志
   console.log('Proxying:', source, '→', destination)
   

2. 使用 curl 测试：

   curl -v http://localhost:3000/api/users
   

3. 检查Network面板：

   • 确保请求显示为 localhost:3000 发起
   • 查看响应头是否包含 x-middleware-rewrite

通过以上方法，可以彻底解决本地开发时的跨域问题，同时保持生产环境的兼容性。