从localhost发送POST请求到heroku服务器?

时间:2016-10-05 20:32:57

标签: node.js post reactjs heroku axios

我试图从我的React应用程序发送POST请求。应用程序在localhost:8000上的节点中本地运行。

我尝试在localhost:5000上本地运行,并且还将服务器应用程序推送到heroku webaddress并尝试发送到该地址。

基本上我的问题是;  1.当我在localhost上本地运行我的react应用程序时,如何向我的heroku服务器发送POST请求?  2.如何在我的heroku服务器/节点应用程序上收到此POST请求?

发送POST请求的反应代码:

import React, { Component } from 'react'
import axios from 'axios'

require('styles/_webshopPage/webshop.css')

export default class Checkout extends Component {

  postRequest() {
        let nodeServerURL = 'https://peaceful-mountain-93404.herokuapp.com'
        let reqData = {
            msg: 'hello!',
        }

        // Send a POST request
        axios({
          method: 'post',
          url: nodeServerURL,
          data: reqData
        })
    }

  render() {
    return (
            <div >
                <button onClick={this.postRequest.bind(this)} type="button" name="button">Send req</button>
            </div>
    )
  }
}

我的heroku服务器的代码:

var express = require('express')
var app = express()

app.set('port', (process.env.PORT || 5000))
app.use(express.static(__dirname + '/public'))

app.post('/', function(request, response) {
  response.send('Hello World!')
})

app.listen(app.get('port'), function() {
  console.log("Node app is running at localhost:" + app.get('port'))
})

1 个答案:

答案 0 :(得分:0)

我做过类似的事情..

我认为Fetch api与它完美配合。

Fetch提供了Request和Response对象的通用定义(以及与网络请求有关的其他内容)。这将允许它们在将来需要的任何地方使用,无论是服务工作者,Cache API和其他处理或修改请求和响应的类似事物,还是可能需要您生成自己的响应的任何用例编程。

我在这里输入了一些随机的例子,希望你能理解fetch api是如何工作的

          var data= "somerandom string";
         fetch('http://localhost/react_task/form_send.php', {
                            method: 'post',
                            body: JSON.stringify({
                                Password: data,// this is posted on another server
                            })
                        }).then(function (res) {
                            return res.text();
                        }).then((body)=> {
                           console.log(body)// body can be used to get data from another server
                         });

我认为fetch对于从其他服务器发布和获取数据非常有用..

享受编码。