国内环境使用 Next.js 框架无法访问外网资源导致无法在开发环境正常调试

前言

今天上午使用 Next.js 集成 better-auth 实现 Google 账号的登录的时候，本地 localhost 测试时总是连接失败，但是部署到线上确可以调通。

问题复现

解决办法

很多基于 Next 开发都会遇到这个问题，可以写一个简单的脚本，思路是将 server 端的请求通过代理转发修复国内无法访问 Google 等服务问题。

新增一个 proxy-setup.ts 文件，代码如下：

proxy.cjs

const { ProxyAgent } = require('undici')

const { fetch: originalFetch } = global
const proxyAgent = new ProxyAgent('http://127.0.0.1:7897/') // 本地代理映射端口

global.fetch = (url, opts) => {
  const urlStr = url.toString()

  // 只对特定域名使用代理
  if (urlStr.includes(":3000/api/crypto")) {
    return originalFetch(url, opts)
  }

  // 请求使用代理
  opts.dispatcher = proxyAgent

  try {
    return originalFetch(url, opts)
  }
  catch (error) {
    console.error('Fetch error:', error)
    throw error
  }
}

在 next.config.ts 中使用

next.config.ts

if (process.env.NODE_ENV === 'development') {
  import ('./src/server/proxy.cjs')
}

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true
}

export default config

国内环境使用 Next.js 框架无法访问外网资源导致无法在开发环境正常调试1 / 1

前言

问题复现

解决办法

On this page

国内环境使用 Next.js 框架无法访问外网资源导致无法在开发环境正常调试