Vercel部署create-react-app后HTTP请求被拦截，求无HTTPS版API解决方案

方案一：使用Vercel Serverless Functions做代理 #

这是适配Vercel部署场景的最优方案，通过在项目中添加代理接口，让前端请求同域的HTTPS接口，再由代理后台调用HTTP的OMDb API，绕过浏览器的混合内容限制。

步骤如下：

1. 在create-react-app项目根目录下创建api文件夹
2. 在api文件夹中新建omdb-proxy.js文件，写入以下代码：

export default async function handler(req, res) {
  const { s, type, y } = req.query;
  const apiKey = '你的OMDb API密钥'; // 替换为你的实际密钥
  const url = `http://www.omdbapi.com/?apikey=${apiKey}&s=${s}${type ? `&type=${type}` : ''}${y ? `&y=${y}` : ''}`;

  try {
    const response = await fetch(url);
    const data = await response.json();
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ error: '获取OMDb数据失败' });
  }
}

3. 修改useMovies.js中的API请求地址，将原来的http://www.omdbapi.com/...替换为代理接口地址，并传递对应查询参数：

// 原请求代码
// const response = await fetch(`http://www.omdbapi.com/?apikey=3cc2a1e3&s=${query}`);
// 修改后
const response = await fetch(`/api/omdb-proxy?s=${query}`);

4. 重新部署项目到Vercel即可，此时前端请求的是同域HTTPS代理接口，代理后台请求HTTP的OMDb API，不会触发混合内容拦截。

方案二：替换为支持HTTPS的影片API #

如果不想搭建代理，可以直接替换为支持HTTPS的影片数据API，比如TMDB（The Movie Database），它提供完整的HTTPS接口，功能覆盖OMDb且更丰富。

注意事项 #

• 本地开发时，代理接口可通过http://localhost:3000/api/omdb-proxy访问，不影响开发流程
• 通过代理接口隐藏OMDb密钥，能避免密钥在前端暴露被恶意盗用

内容的提问来源于stack exchange，提问作者luka gubelidze 2