React部署时如何修改handleSubmit？替换localhost为Heroku后端地址

嘿，这个问题其实很常见，我来给你一步步讲清楚怎么处理：

• 第一步：获取Heroku后端的公开访问地址
  当你把后端部署到Heroku之后，Heroku会自动为你的应用分配一个公开的域名，格式通常是 https://<你的Heroku应用名称>.herokuapp.com。举个例子，如果你的后端应用名叫 portfolio-contact-backend，那完整地址就是 https://portfolio-contact-backend.herokuapp.com。
  你可以登录Heroku后台，进入你的应用页面，在「Settings」标签页的「Domains」区域找到这个地址。

• 第二步：替换代码中的API地址
  直接把原来代码里的 http://localhost:4000/api/email 替换成上面拿到的Heroku地址加上你的接口路径。修改后的代码片段应该是这样的：

  Axios.post('https://your-heroku-app-name.herokuapp.com/api/email', this.state)
  

  记得把 your-heroku-app-name 换成你实际的Heroku应用名称哦。

• 第三步：别忘了处理跨域（CORS）问题
  因为你的前端部署在Firebase（和Heroku后端属于不同域名），浏览器会触发跨域限制。你需要在Heroku后端配置CORS：

  • 如果是Node.js后端，可以安装 cors npm包，然后配置允许Firebase的域名访问（生产环境别用*，要指定具体的Firebase域名，比如 https://your-firebase-project.web.app）；
  • 如果是其他语言的后端，也有对应的CORS配置方式，核心是允许前端域名发起请求。

• 进阶技巧：用环境变量管理API地址
  为了方便后续维护（比如换后端地址不用改代码），建议把API地址放在环境变量里：

  • 本地开发时，可以在项目根目录创建 .env 文件，添加 REACT_APP_API_URL=https://your-heroku-app-name.herokuapp.com（React项目的环境变量需要以REACT_APP_开头）；
  • 部署到Firebase时，在Firebase控制台的「项目设置」→「环境变量」里添加对应的变量；
  • 代码里就可以写成：

    Axios.post(`${process.env.REACT_APP_API_URL}/api/email`, this.state)
    

最后还要注意：一定要用https开头的地址，因为Firebase前端是HTTPS，混合HTTP请求会被浏览器拦截哦。

内容的提问来源于stack exchange，提问作者Daniel Zhang