硬编码链接和 .env PORT

Question

5 video tutorial series
Original LoopBack & React tutorial from Traversy for comparison

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

我想我把所有的链接都改回来了

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

到axios.get(`http://localhost:3000/api/Barrels/${barrelID}`) 但我仍然缺少一些东西，我可以在 Heroku 上编译它

https://food-liberation-frontz.herokuapp.com

但是当我点击保存链接添加一个新桶时，它坏了。

```

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class AddBarrel extends Component {

    addBarrel(newBarrel){
        console.log(newBarrel);
        axios.request({
            method:'post',
            url:'http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels',
            data: newBarrel
        }).then(response => {
            this.props.history.push('/');
        }).catch( err => console.log(err));
    }

    onSubmit(e){
        const newBarrel = {
            Name: this.refs.Name.value,
            barrel_number: this.refs.barrel_number.value,
            contents: this.refs.contents.value,
            date_last_checked: this.refs.date_last_checked.value,
            date_planted: this.refs.date_planted.value,
            location: this.refs.location.value,
            size: this.refs.size.value,
            notes: this.refs.notes.value
        }
        this.addBarrel(newBarrel);
        e.preventDefault();
    }

    render () {
    return (
            <div className = "container green lighten-3" >
            <br />
            <Link className = "btn grey" to = "/">back</Link>
            <h6>add a Barrel</h6>
            <form onSubmit = {this.onSubmit.bind(this)}>
                <div className = "input-field" >
                    <input type = "text" name = "Name" ref = "Name" />
                    <label htmlFor = "Name" >Name</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "barrel_number" ref = "barrel_number" />
                    <label htmlFor = "barrel_number" >barrel number</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "contents" ref = "contents" />
                    <label htmlFor = "contents" >contents</label>
                </div>
                <div className = "input-field" >
                    <input type = "date" name = "date_planted" ref = "date_planted" />
                    <label htmlFor = "date_planted" ></label>
                </div>
                <div className = "input-field" >
                    <input type = "date" name = "date_last_checked" ref = "date_last_checked" />
                    <label htmlFor = "date_last_checked" ></label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "location" ref = "location" />
                    <label htmlFor = "location" >location</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "size" ref = "size" />
                    <label htmlFor = "size" >size</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "notes" ref = "notes" />
                    <label htmlFor = "notes" >notes</label>
                </div>                

                <input type = "submit" value = "Save" className = "btn" />
            </form>
            </div>
           )
}
}

export default AddBarrel;

```

Answer 1

您是否定义了当服务器从前端收到您在上面定义的POST 请求时您的应用程序应该做什么？比如……

在您的 POST 请求上方的 React 组件中，可能看起来像这样。我已经修改了上面的代码，特别是 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')
})