我试图从我的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'))
})
答案 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对于从其他服务器发布和获取数据非常有用..
享受编码。