在Heroku上使用React，Axios访问内部API [英] Accessing internal API with React, Axios on Heroku
问题描述
我正在构建一个全栈React应用程序，该应用程序使用Axios访问其自己的后端API.在我的本地环境中，以下各项按预期方式工作，服务器响应JSON数据，然后将其正确呈现.
I am building a full stack React application that accesses its own back end API with Axios. In my local environment, the following works as expected, with the server responding with JSON data, which is then rendered properly.
axios.get('/api/questions/categories')
我已部署到Heroku，应用程序正常启动，并且MongoDB已连接.现在，当发出相同的GET请求时，它没有到达后端.当我将响应从Axios记录到控制台时，它包含页面的实际HTML，而不是预期的JSON对象.
I deployed to Heroku, and the app is launching normally and MongoDB is connected. Now, when the same GET request is made, it is not reaching the back end. When I log the response from Axios to the console, it contains the actual HTML of the page, instead of the JSON object expected.
为进一步说明，如果我手动输入' http://localhost:8080/api/questions/地址栏中的类别" "，则显示预期的JSON数据.如果我对Heroku上的应用程序执行相同的操作，则会看到URL后面附加了一个#"，并且页面显示没有更改，也没有错误消息.这使我认为其中包含了react-router，但我仍无法弄清楚如何/为什么.
For further clarification, if I manually type 'http://localhost:8080/api/questions/categories' in the address bar, the expected JSON data is displayed. If I do the same with the app on Heroku, I see that a '#' is appended to the url and the page display does not change, no error messages. This leads me to think that react-router is involved, but I have not been able to figure out how/why.
我的堆栈:Node，Express，Mongo，React
My stack: Node, Express, Mongo, React
不使用Redux
使用Axios调用我自己的API
Using Axios to call my own 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:c28cf07fpf05uus13ipjeur5s7@ds143000.mlab.com: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);
});
感谢您的帮助！
推荐答案
大多数单页应用程序将所有请求路由到根路径，然后让前端路由器接管.我怀疑这就是您的应用程序正在发生的事情.
Most single page applications route all requests to the root path and let the front end router take over. I suspect that is what is happening to your app.
您的后端代码或任何服务器配置代码中是否有任何形式的请求重定向逻辑?
Do you have any form of requests redirection logic in your back end code or any server configuration code?
您可以做的是将一些您不想让前端路由接管的路径列入白名单，例如以/api开头的路径.在此处粘贴服务器端配置会有所帮助.
What you can do is to whitelist some paths that you don't want front end routing to take over, such as those that start with /api. Pasting your server side config here will be helpful.
在服务器配置中，当inDev为false时，您有一个app.get('*', ...)可以捕获所有请求并使用静态单页应用程序进行响应.因此，API请求也将给出相同的响应.您将需要重新配置路由以匹配通配符*之前的/api.可以在此处
In your server config, when inDev is false, you have a app.get('*', ...) that catches all requests and responds with the static single page app. Hence API requests will also give the same response. You will need to restructure your routes to match /api before the wildcard *. Some examples can be found here
这篇关于在Heroku上使用React，Axios访问内部API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
