在 Heroku 上使用 React、Axios 访问内部 API

Posted 2023-02-22

【中文标题】在 Heroku 上使用 React、Axios 访问内部 API

【英文标题】：Accessing internal API with React, Axios on Heroku

【发布时间】：2017-08-19 12:34:04

【问题描述】：

我正在构建一个全栈 React 应用程序，它使用 Axios 访问它自己的后端 API。在我的本地环境中，以下内容按预期工作，服务器使用 JSON 数据进行响应，然后正确呈现。

axios.get('/api/questions/categories')

我部署到 Heroku，应用正常启动，MongoDB 已连接。现在，当发出相同的 GET 请求时，它并没有到达后端。当我将 Axios 的响应记录到控制台时，它包含页面的实际 html，而不是预期的 JSON 对象。

为了进一步说明，如果我在地址栏中手动键入“http://localhost:8080/api/questions/categories”，则会显示预期的 JSON 数据。如果我对 Heroku 上的应用程序执行相同操作，我会看到 '#' 附加到 url 并且页面显示没有改变，没有错误消息。这使我认为涉及到 react-router，但我无法弄清楚如何/为什么。

我的堆栈：Node、Express、Mongo、React

不使用 Redux

使用axios调用自己的API

// Dependencies
var express = require('express');
var path = require('path');
var webpack = require('webpack');
var webpackMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config.js');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var morgan = require('morgan');

var inDev = process.env.NODE_ENV !== 'production';
var port = inDev ? 8080 : process.env.PORT;
var app = express();

// MIDDLEWARE

if (inDev)
  var compiler = webpack(config);
  var middleware = webpackMiddleware(compiler, 
    publicPath: config.output.publicPath,
    contentBase: 'app',
    stats: 
      colors: true,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      modules: false
    
  );

  app.use(morgan('dev'));
  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));
  app.get('/', function response(req, res) 
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname,     'dist/index.html')));
    res.end();
  );
 else 
  app.use(express.static(__dirname + '/dist'));
  app.get('*', function response(req, res) 
    res.sendFile(path.join(__dirname, 'dist/index.html'));
  );


app.use(bodyParser.urlencoded(extended: true));
app.use(bodyParser.json());

app.use(function(req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods',     'GET,HEAD,OPTIONS,POST,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers,  Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method,   Access-Control-Request-Headers');

  //and remove caching so we get the most recent comments
  res.setHeader('Cache-Control', 'no-cache');
  next();
);

// DATABASE

var dbPath = inDev ? 'mongodb://localhost/quizMe' :     'mongodb://heroku_pmjl5579:[e-mail]:43000/heroku_pmjl5579';

mongoose.connect(dbPath);

// ROUTING / API

// var indexRoute = require('./routes/index');
var questionsRoute = require('./routes/api/questions');
// app.use('/', indexRoute);
app.use('/api/questions', questionsRoute);

app.listen(port, function()
  console.log('Express server up on ' + port);
);

感谢您的帮助！

【参考方案1】：

大多数单页应用程序将所有请求路由到根路径并让前端路由器接管。我怀疑这就是您的应用所发生的情况。

您的后端代码或任何服务器配置代码中是否有任何形式的请求重定向逻辑？

您可以做的是将一些您不希望前端路由接管的路径列入白名单，例如以 /api 开头的路径。在此处粘贴您的服务器端配置会很有帮助。

在您的服务器配置中，当 inDev 为 false 时，您有一个 app.get('*', ...) 捕获所有请求并使用静态单页应用程序进行响应。因此 API 请求也会给出相同的响应。您需要在通配符 * 之前重组路由以匹配 /api。一些例子可以找到here

【讨论】：

谢谢@YangShun，听起来是个不错的解决方案。在上面添加了我的 server.js。我之前没有将前端路由列入白名单，但会调查它。知道任何解释该过程的好资源吗？

@gJanssen 这确实是您的服务器端配置。用这些新知识更新了我的答案。

感谢您为我指明正确的方向。实际上，当 inDev 为 false 时，只需将 app.get() 中的“*”更改为“/”，我就得到了我需要的结果。