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

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

安全

我在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吗？有没有前端能解决的办法？

我来解答赞 11 收藏

反馈

1 条解答

梓怡 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