React.js+Vite项目部署Vercel后API请求JSON解析报错

核心原因 #

Vite的server.proxy仅在本地开发服务器生效，部署到Vercel（或其他静态托管平台）后，该配置不会被执行。此时前端请求/v1/xxx路径时，静态服务器会将其视为前端路由，返回网站主页的HTML文件，而非转发到Naver OpenAPI，因此出现JSON解析错误。

解决方案 #

1. 配置Vercel重写规则（生产环境代理） #

在项目根目录创建vercel.json文件，添加以下内容，让Vercel将/v1开头的请求转发到Naver API：

{
  "rewrites": [
    {
      "source": "/v1/(.*)",
      "destination": "https://openapi.naver.com/v1/$1"
    }
  ]
}

2. 修正本地代理的rewrite规则 #

你的vite.config.js中rewrite规则存在错误，原本代理的是/v1路径，但rewrite却替换/api开头的字符串，导致本地代理存在潜在问题。修正为：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.glb'],
  server: {
    proxy: {
      '/v1': {
        target: 'https://openapi.naver.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/v1/, ''), // 替换/v1前缀为空
        secure: false,
        ws: true,
      }
    }
  },
})

3. 确保Vercel环境变量正确配置 #

在Vercel项目的「Settings > Environment Variables」中，添加以下两个环境变量，值与本地.env文件一致：

• VITE_API_BLOG_KEY_ID
• VITE_API_BLOG_KEY_SECRET

额外说明 #

• 更换托管商（如Namecheap）后问题仍存在，是因为所有静态托管平台都需要单独配置代理规则，Vite的本地代理配置无法复用。
• 已添加的Naver API白名单是必要的，但仅解决跨域问题，无法替代生产环境的代理配置。

内容的提问来源于stack exchange，提问作者Yegi Park