部署于Vercel的React项目遭遇CORS问题，寻求解决办法

你遇到的CORS报错如下：

直接在前端调用Zoho Catalog API会触发浏览器同源策略拦截，部署到Vercel后这个问题会直接暴露（本地开发可能依赖代理工具规避了）。下面给几个可行的解决办法：

方法一：用Vercel API Routes做请求代理（最推荐） #

Vercel支持创建Serverless API路由，让后端服务去请求Zoho API，前端只请求自身Vercel域名的接口，彻底规避跨域问题，还能保护敏感请求逻辑。

操作步骤： #

1. 在项目根目录创建api文件夹（如果是Next.js项目直接用pages/api目录，CRA项目Vercel也会自动识别根目录的api文件夹）
2. 在api目录下新建zoho-proxy.js文件，写入以下代码：

export default async function handler(req, res) {
  const { method } = req;

  if (method === 'POST') {
    // 转发获取token的请求
    try {
      const tokenResponse = await fetch(process.env.ZOHO_TOKEN_URL, {
        method: 'POST',
        // 若需要传递请求参数，可从req.body中读取后添加
      });
      const tokenData = await tokenResponse.json();
      res.status(tokenResponse.status).json(tokenData);
    } catch (error) {
      res.status(500).json({ error: '获取Token失败' });
    }
  } else if (method === 'GET') {
    // 转发获取业务数据的请求
    const { token } = req.query;
    try {
      const dataResponse = await fetch(process.env.ZOHO_DATA_URL, {
        method: 'GET',
        headers: {
          'Authorization': `Zoho-oauthtoken ${token}`
        }
      });
      const data = await dataResponse.json();
      res.status(dataResponse.status).json(data);
    } catch (error) {
      res.status(500).json({ error: '获取数据失败' });
    }
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`不支持${method}请求方法`);
  }
}

3. 进入Vercel项目控制台，在「环境变量」中添加ZOHO_TOKEN_URL和ZOHO_DATA_URL，分别对应你原代码中的urlPost和urlGet地址
4. 修改前端请求代码，改为调用自己的Vercel API路由：

useEffect(()=>{ 
  const peticion = fetch('/api/zoho-proxy',{
    method: 'POST',
  });
  peticion
  .then((ans)=> ans.json())
  .then((resp)=>{
    const reslt = resp.access_token;
    return fetch(`/api/zoho-proxy?token=${reslt}`,{
      method: "GET"
     })})
    .then((answer) => answer.json())
    .then((resp) => {
      const result = resp.data
      setData(result)
      setFiltered(result)
    }) 
},[])

方法二：配置Zoho API的CORS白名单 #

如果Zoho开放了CORS配置权限，直接进入Zoho开发者控制台，把你的Vercel部署域名（比如your-project.vercel.app）添加到「允许的跨域来源（Allowed Origins）」列表中。这种方式可以让前端直接请求Zoho API，但要注意：涉及token的请求直接在前端发起有泄露风险，不建议用于生产环境。

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