本地开发用 HTTPS 会影响 React 的 API 请求吗？

令狐奥翔提问于 2026-03-26 11:22:22 阅读 21

前端

我最近在本地用 create-react-app 搭了个项目，为了测试某些需要 HTTPS 的功能（比如摄像头权限），就启用了 HTTPS 启动。但发现发请求到后端接口时老是失败，提示混合内容（mixed content）错误。明明后端是 HTTP 的，难道本地 HTTPS 下不能请求 HTTP 接口？

我试过把代理配在 package.json 里，也试过直接写完整 URL，都不行。是不是必须让后端也上 HTTPS 才能调试？下面是我调用接口的代码：

useEffect(() => {
  fetch('http://localhost:3001/api/data')
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => console.error('请求失败:', err));
}, []);

HTTPS 前端安全

我来解答赞 3 收藏

反馈

1 条解答

程序员树萱 Lv1

混合内容错误确实会这样，浏览器不允许 HTTPS 页面加载 HTTP 资源。要解决这个问题不用动后端，直接用这个：

在 create-react-app 项目根目录创建个 setupProxy.js 文件，写入以下内容

const { createProxyMiddleware } = require('http-proxy-middleware');



module.exports = function(app) {

  app.use(

    '/api',

    createProxyMiddleware({

      target: 'http://localhost:3001',

      changeOrigin: true,

      secure: false // 忽略SSL证书验证

    })

  );

};

然后把 fetch 请求改成相对路径：

useEffect(() => {

  fetch('/api/data')

    .then(res => res.json())

    .then(data => setData(data))

    .catch(err => console.error('请求失败:', err));

}, []);

重启开发服务器就行。记得安装 http-proxy-middleware 包。这个方法能让你继续用本地 HTTPS 同时访问 HTTP 接口，省得改后端配置。

顺便说下，开发环境这么搞没问题，生产环境还是要统一用 HTTPS 的，安全第一。

2026-03-26 11:24