React项目HTTPS部署后，为什么AJAX请求到http://api端点被阻止？

浩轩酱~ 提问于 2026-02-01 15:23:31 阅读 63

安全

我在React项目里用fetch调用公司旧系统的API接口，开发环境用HTTPS没问题，但部署到HTTPS服务器后突然报错：”Mixed Content: The page was loaded over HTTPS, but requested an insecure resource”。

代码是这样的：


fetch('http://api.example.com/data')
  .then(res => res.json())
  .then(data => this.setState({ items: data }))
  .catch(err => console.error('Fetch error:', err));

我试过在nginx配置里加headers强制HTTPS，也尝试过用相对协议//api.example.com，但还是不行。难道必须要求后端也支持HTTPS吗？有没有前端能解决的办法？

我来解答赞 15 收藏

反馈

2 条解答

宇文会静 Lv1

别走弯路了，这个问题本质是浏览器的混合内容（Mixed Content）策略在搞鬼——页面是 HTTPS 的，你却发 HTTP 请求，浏览器直接给你拦了，前端根本没得救。

你试的相对协议 //api.example.com 只有在你域名本身支持 HTTPS 时才有效，但如果后端 API 根本没开 HTTPS（比如公司老系统只跑在 HTTP 上），那这个方案也救不了场。

真·可行的方案只有两个：

第一个，也是最推荐的：让后端支持 HTTPS。哪怕用 nginx 反向代理一下，把 http://api.example.com 转成 https://api.example.com，或者直接给后端配个自签名证书（测试环境够用），或者用 Let’s Encrypt 免费证书。这个成本最低、一劳永逸。

第二个，如果你确实改不了后端（比如权限卡死、系统太老），那就在前端加一层代理：在你的前端服务器（比如 nginx 或者 Node 中间层）里加个反向代理，把请求转成 HTTP 转发出去，但对外统一走 HTTPS。

比如 nginx 配置里加个 location：

location /api/ {

    proxy_pass http://api.example.com/;

    proxy_set_header Host api.example.com;

    proxy_ssl_verify off;  # 如果后端是自签名证书才加这行，正式环境别这么干

}

然后前端请求改成 /api/data 这种相对路径，这样浏览器看到的全是 HTTPS，不会报 Mixed Content。

但注意，这个方案只是“绕过”了浏览器的限制，本质上还是 HTTP 传输，敏感数据照样不安全，生产环境慎用。

总结一句：别指望纯前端能解决 HTTPS 页面调 HTTP 接口的问题，要么后端上 HTTPS，要么加一层代理转发，没第三条路。

2026-02-24 08:18

梓怡 Dev Lv1

是这样的，浏览器对混合内容（HTTPS页面加载HTTP资源）会直接拦着不让过，这是浏览器的安全策略。你试的那些方法都没法从根本上解决问题。

最简单直接的办法就是把API地址改成https://api.example.com/data。如果后端真的不支持HTTPS，那前端确实没啥好办法绕过去，除非你能搞定后端加证书。

另外提供一个折中方案：让你的Nginx做个反向代理，把HTTPS请求转到后端的HTTP接口上。配置大概长这样：

server {

    listen 443 ssl;

    server_name yourdomain.com;



    location /data {

        proxy_pass http://api.example.com/data;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

    }

}

然后你前端代码改成调用自己的域名：fetch('https://yourdomain.com/data')。复制过去试试，应该就能搞定。

不过说真的，还是建议推动后端搞个证书，不然这种问题会一直折腾人。

2026-02-01 16:00