0

わかりましたので、 create-react-appを使用した非常に単純なアプリがあります。現在、ExpressJSを使用して、 componentWillMount ()メソッド内の反応アプリ内の$.ajax()メソッドで行っている API 呼び出しを処理しています。

したがって、React フロント エンドにあるのは、入力フィールドが 1 つあるシンプルなフォームだけで、次のように送信します。

import React, { Component } from 'react';
import $ from 'jquery';
import './App.css';

class App extends Component {


  componentDidMount(){

      $('form').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
          url: '/api',
          type: 'post',
          data: $('form').serialize(),
          dataType: 'json',
          success: function(data) {
            console.log('successful ajax request made!');
          }
        });

      });
  }

  render() {
    return (
      <div className="App">
        <form method="POST">
          <input type="text" name="title" />
          <input id="submit" type="submit" />
        </form>
      </div>
      );
  }
}

export default App;

今、私の高速ルートは次のようになります。

var express = require("express");
var router = express.Router();

router.post("/api", function(req, res, next){
    console.log(req.body);
});

module.exports = router;

問題

npm startでcreate-react-appを実行すると、 localhost:3000に移動し、Webpack ローカル開発サーバーに移動し、ノード server/app.jsを使用してサーバー ディレクトリでapp.jsを起動すると、 localhost:3001に移動するためです。同じポートで実行することはできません。

このため、POST 要求が失敗したことを示すエラーが表示されることなく、適切な API 呼び出しを行うことができません。

では、2 つの異なるポートでローカル サーバーから API 呼び出しを行うにはどうすればよいのでしょうか。

私のコードについてさらに情報が必要な場合は、喜んで投稿します。助けていただければ幸いです、ありがとうございます！

4

3 に答える 3

0

この行で設定する必要がありますpackage.json：

"proxy": "http://localhost:PORT"

Express サーバーでPORT設定したポート番号です。

したがって、Webpack ローカル開発サーバーは、Express によって実行される API に到達するためにどの URL を呼び出さなければならないかを認識しています。

于 2017-07-05T19:17:17.113 に答える