如何在同一端口上设置 React 应用程序和 API？

Question

我有一个 React 应用程序，它通过 API 从单独的数据库中提取数据。

当我在本地运行它时，应用程序是一个端口，而 API 在另一个端口上。

因为当我在应用程序中对 API 进行 AJAX 调用时，我需要包含 API 可以连接的 URL。

如果我对单独的端口进行硬编码（例如，应用程序在 http://localhost:3000 上，API 在 http://localhost:3100 上，使 AJAX url 调用 API http://localhost:3100/api/trusts），它就可以工作。

但是，由于应用程序和 API 位于不同的端口上，我无法将 AJAX url 设为相对路径，因为它错误地将 AJAX 调用发送到 http://localhost:3000/api/trusts 而不是 http://localhost:3100/api/trusts。

如何让它们在同一个端口上运行？

谢谢！

这是我的 server.js：

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var path = require('path');
var app = express();
var router = express.Router();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;

//set our port to either a predetermined port number if you have set it up, or 3001
var port = process.env.PORT || 5656;

//db config
var mongoDB = 'mongodb://XXX:XXX!@XXX.mlab.com:XXX/XXX';
mongoose.connect(mongoDB);
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));

//body parsing
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// allow cross-browser
app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

// handling static assets
app.use(express.static(path.join(__dirname, 'build')));

// api handling
var TrustsSchema = new Schema({
  id: String,
  name: String
});

var Trust = mongoose.model('Trust', TrustsSchema);

const trustRouter = express.Router();

trustRouter
    .get('/', (req,res) => {

      Trust.find(function(err, trusts) {
        if (err) {
          res.send(err);
        }
        res.json(trusts)
      });
    });

app.use('/api/trusts', trustRouter);


//now  we can set the route path & initialize the API
router.get('/', function(req, res) {
  res.json({ message: 'API Initialized!'});
});

app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

app.listen(port, function() {
  console.log(`api running on port ${port}`);
});

下面是我试图进行的 AJAX 调用，它不起作用，因为相对路径附加到应用程序的端口（即http://localhost:3000/）而不是 API 的端口（即http://localhost:3100/）：

axios.get("/api/trusts")
  .then(res => {
    this.setState({trusts: res.data});
  })
  .catch(console.error);

Answer 1

要告诉开发服务器将任何未知请求代理到开发中的 API 服务器，请在您的 package.json 中添加一个代理字段，例如：

"proxy": "http://localhost:4000",

这样，当您在开发中fetch('/api/todos') 时，开发服务器将识别出它不是静态资产，并将您的请求代理到http://localhost:4000/api/todos 作为后备。开发服务器只会尝试将其 Accept 标头中没有 text/html 的请求发送到代理。

“请记住，代理仅在开发中有效（使用 npm start），您需要确保 /api/todos 等 URL 指向生产中的正确内容。”

注意：此功能适用于 react-scripts@0.2.3 及更高版本。

更多详情：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development