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请求时，您是否定义了应用程序应执行的操作？例如......

在上面的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') })

硬编码链接和.env PORT

1 个答案: