0

好的，所以我有一个非常简单的应用程序create-react-app。现在，我使用ExpressJS来处理我在componentWillMount()方法中的 react 应用程序中使用$.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

1

在您现有的客户端 Package.json 文件中添加这一行

"proxy": {
   "/api/*": {
      "target": "http://localhost:3001"
   }
}

我正在考虑您的前端在 PORT 3000 上运行，并且您正在向快速服务器所依赖的 PORT 3001 发出请求。进行更改后，终止现有的前端服务器并重新启动它。热重载不会更新 Package.json 文件。现在您的所有请求/api/都将直接路由到您的 PORT 3001

于 2017-10-21T11:48:12.717 回答
0

您必须在package.json此行中进行设置：

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

是PORT您在 Express 服务器中设置的端口号。

因此，Webpack 本地开发服务器知道必须调用哪个 URL 才能访问 Express 运行的 API。

于 2017-07-05T19:17:17.113 回答
0

如果我理解正确，您的前端在 localhost:3000 上运行，而后端在 local:3001 上运行，所以您正在寻找一种解决方案来在 2 个不同的端口上从前端向后端发出请求？如果是这样，我相信您需要使用 baseUrl 调用后端，http:localhost:3001/api_call_here

        $.ajax({
          url: 'http:localhost:3001/api',
          type: 'post',
          data: $('form').serialize(),
          dataType: 'json',
          success: function(data) {
            console.log('successful ajax request made!');
          }
        });
于 2017-02-13T09:59:07.043 回答