2016-10-05 6 views
1

私のReactアプリケーションからPOSTリクエストを送信しようとしています。アプリケーションはlocalhost:8000のノードでローカルに実行されています。localhostからherokuサーバーにPOSTリクエストを送信していますか?

localhost:5000でローカルに実行しようとしましたが、サーバーアプリケーションをheroku webaddressにプッシュして、そのアドレスに送信しようとしました。

基本的に私の質問です。 1. localhostでローカルの反応アプリケーションを実行しているときに、herokuサーバーにPOSTリクエストを送信するにはどうすればよいですか? 2. herokuサーバー/ノードアプリケーションでこのPOST要求を受け取るにはどうすればよいですか?私のHerokuのサーバ用に

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> 
    ) 
    } 
} 

コード:


は、POSTリクエストを送信するためのコードを反応させるの

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

私はあなたの質問を理解していない! herokuの – AlfredO

+0

は、ポート5000で動作するノードサーバーですか? –

答えて

0

私は似ているようなことを行っている。..

を私は考えますフェッチapiは完全にそれで動作します。

Fetchは、RequestオブジェクトとResponseオブジェクト(およびネットワーク要求に関連するその他のオブジェクト)の一般的な定義を提供します。これにより、サービスワーカー、Cache 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 
         }); 

フェッチ作品APIをフェッチする方法を理解するために、ここにいくつかのランダムな例を願っています入力してきたが..投稿して別のサーバからデータを取得するために完璧に多くのことができます

コーディングをお楽しみください。

+0

答えをありがとう。これがエクスプレスライブラリとどのように異なるのか説明できますか? – AlfredO

関連する問題