Binance API触发CORS错误的原因及React/Next.js环境下解决方法求助

核心问题根源 #

你遇到的所有CORS错误，本质是一开始用错了Binance的API域名——Binance公开REST API的正确域名是https://api.binance.com，而非https://binance.com。访问错误域名会触发301重定向，而浏览器的CORS预检请求（OPTIONS）不允许跟随重定向，进而引发后续一系列问题。

分步解决方案 #

1. 修复基础请求，解决预检重定向错误 #

直接使用正确的API域名，移除不必要的crossDomain或withCredentials配置（公开接口无需凭证）：

useEffect(() => {
  const fetchData = async () => {
    try {
      const { data } = await axios.get('https://api.binance.com/api/v3/klines', {
        params: {
          symbol: 'ETHUSDT',
          interval: '1h',
          startTime: '1514764800000',
        },
      })
      console.log(data)
    } catch (err) {
      console.error(err)
    }
  }
  fetchData()
}, [])

2. 为什么withCredentials: true会报错？ #

Binance公开接口的响应头中，Access-Control-Allow-Origin值为通配符*。当请求设置withCredentials: true时，浏览器会强制要求Origin不能是通配符，因此触发错误。公开接口完全不需要携带凭证（Cookie等），直接删除这个配置即可。

3. 修正Next.js代理配置，解决通配符Origin错误 #

如果需要通过代理转发请求（比如统一域名、隐藏真实API地址），按以下方式配置：

修正后的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/binance/:path*',
        destination: 'https://api.binance.com/api/v3/:path*',
      },
    ]
  },
}

module.exports = nextConfig

前端代理请求代码：

useEffect(() => {
  const fetchData = async () => {
    try {
      const { data } = await axios.get('/api/binance/klines', {
        params: {
          symbol: 'ETHUSDT',
          interval: '1h',
          startTime: '1514764800000',
        },
      })
      console.log(data)
    } catch (err) {
      console.error(err)
    }
  }
  fetchData()
}, [])

说明：代理后前端请求的是同源路径（自己域名下的/api/binance/klines），Next.js自动转发到Binance的正确API地址，浏览器不会触发CORS检查，同时避免了凭证模式的限制。

内容的提问来源于stack exchange，提问作者János