Heroku 硬编码链接和.env端口

我已经按照教程进行了学习，并在Cloud 9的开发中使用了它。。 我不确定如何将端口设置为环境变量，因此我为Cloud 9将端口硬编码为8080。。现在我试着在Heroku上运行它，我所有的axios帖子都坏了

我想我把所有的链接都从

axios.get(`http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels/${barrelID}`)

要

axios.get(`http://localhost:3000/api/Barrels/${barrelID}`）

但是我仍然缺少一些东西，我可以在Heroku上编译它

但当我点击save链接添加一个新桶时，它就坏了

```

import React，{Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
类AddBarrel扩展组件{
addBarrel（纽巴雷尔）{
控制台日志（newBarrel）；
axios.request({
方法：'post'，
网址：'http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels',
资料来源：纽巴雷尔
})。然后（响应=>{
this.props.history.push（'/'）；
}).catch（err=>console.log（err））；
}
提交（e）{
康斯特纽巴雷尔={
名称：this.refs.Name.value，
桶号：this.refs.barrel_number.value，
目录：this.refs.contents.value，
上次检查日期：this.refs.date\u last\u checked.value，
种植日期：this.refs.date\u planted.value，
位置：this.refs.location.value，
大小：this.refs.size.value，
备注：this.refs.notes.value
}
这是addBarrel（newBarrel）；
e、 预防默认值（）；
}
渲染（）{
返回(


返回
加一桶
名称
桶数
目录
位置
大小
笔记
)
}
}
导出默认的AddBarrel；

---

```

您是否定义了当服务器从前端接收到上面定义的

POST

请求时，应用程序应该做什么？例如

在上面的React组件中，您的

POST

请求可能如下所示。我已经修改了上面的代码，特别是URL。请注意，您的浏览器已指向应用程序的URL，但您希望向应用程序中的特定路径发出

POST

请求

axios.request({
  method:'post',
  url:'/api/Barrels',
  data: newBarrel
})

您的服务器将接收到该路由的请求，执行一些操作，并做出相应的响应。下面的代码可能位于

server.js

中

app.post('/api/Barrels', function (req, res) {
  res.send('STUFF BACK TO FRONT END')
})

---

我创建了一个新的存储库，这个存储库应该都是localhost:8080，我以前忘了更改服务器配置。接下来，我将安装Node的本地版本。我喜欢在线开发，但调试本地版本可能更容易，我可以将其保留在：3000，我只将其更改为：8080以在C9I在线运行。我使用localhost:3000制作了这个版本，我希望今晚在本地环境中尝试。这感觉很有意义，这是我试用react路由器的第一个项目，也是部署中的第二个主题。。在搜索了repo中的“get”之后，我想我需要在其中进行重构。看起来他们正在为React Router添加通配符，但示例是针对Express，而不是LoopBack，所以我不确定应该如何重构这部分！对我想我明白了，今晚可能很晚我才能试试。。但我明白你的意思。我认为我最初的问题有误导性。。一旦它开始工作，我会尝试对它进行反向工程..比如，我试图在其范围内过早地链接链？我告诉它在调用router@TurtleWolf只有您的

组件作为参考，当您的

addBarrel（）

方法接收来自服务器的响应。一旦axios解决了承诺，您所要做的就是推到

“/”

。如果这是您的目标，那么这应该是可行的，但是如果您需要对响应执行某些操作，

console.log

上面的响应

this.props.history.push（'/'）

。

app.post('/api/Barrels', function (req, res) {
  res.send('STUFF BACK TO FRONT END')
})