React前端本地可调用Heroku后端，部署后无法调用问题咨询

核心排查点：混合内容拦截 #

你部署到Heroku的前端应用默认使用HTTPS协议，但请求代码里硬编码了http://WEBAPPBACKENDNAME.herokuapp.com，浏览器会阻止HTTPS页面发起HTTP请求（混合内容安全限制），导致请求根本没发送到后端，所以后端日志无任何记录。这是Heroku部署前后端分离应用的高频问题。

修复方案 #

1. 改用HTTPS请求后端 #

直接把请求URL中的http替换为https，适配Heroku的HTTPS环境：

const getPW = async (username) => {
  var res = await fetch(`https://WEBAPPBACKENDNAME.herokuapp.com/getPW?username=${username}`, {
      method: 'GET',
  })
  return res.json()
}

2. 使用相对路径简化请求（可选） #

如果后续计划将前后端绑定到同一域名，可通过相对路径避免硬编码域名与协议，同时在React项目的package.json中配置代理：

// fetcher.js中的请求代码
const getPW = async (username) => {
  var res = await fetch(`/getPW?username=${username}`, {
      method: 'GET',
  })
  return res.json()
}

在package.json中添加代理配置：

"proxy": "https://WEBAPPBACKENDNAME.herokuapp.com"

额外验证步骤 #

打开前端部署后的页面，按F12打开浏览器控制台：

• 查看Console标签，确认是否有混合内容相关报错（如Mixed Content: The page at 'https://your-frontend.herokuapp.com' was loaded over HTTPS, but requested an insecure resource）
• 查看Network标签，确认请求是否被发起、状态码是否正常

内容的提问来源于stack exchange，提问作者Lee Sung Hye