React、Axios on Herokuで内部APIにアクセスする

Question

Axiosで独自のバックエンドAPIにアクセスする完全スタックのReactアプリケーションを構築しています。私のローカル環境では、JSONデータに応答するサーバーが期待どおりに動作し、JSONデータが適切にレンダリングされます。

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

私はHerokuにデプロイされ、アプリは正常に起動しており、MongoDBは接続されています。今、同じGETリクエストが行われると、バックエンドに到達していません。 Axiosからの応答をコンソールに記録すると、期待されるJSONオブジェクトではなくページの実際のHTMLが含まれます。

さらに明確にするために、アドレスバーに手動で「http://localhost:8080/api/questions/categories」と入力すると、予想されるJSONデータが表示されます。私がHerokuのアプリと同じことをすると、URLに「＃」が追加され、ページの表示は変わらず、エラーメッセージも表示されないことがわかります。これは私に反応ルータが関わっていると思うようになりますが、どのように/理由を理解することはできませんでした。

マイスタック：ノード、エクスプレス、モンゴは、私自身の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); 
}); 

感謝を呼び出すためにAxiosを使用してReduxの

を使用していない

に反応！

Answer 1

ほとんどのシングルページアプリケーションは、すべての要求をルートパスにルーティングし、フロントエンドルーターに引き継ぎます。私はそれがあなたのアプリに起こっていると思う。

バックエンドコードまたは任意のサーバー構成コードに任意の形式の要求リダイレクトロジックがありますか？

/apiで始まるものなど、フロントエンドルーティングを引き継ぎたくないいくつかのパスをホワイトリストに登録することができます。ここにあなたのサーバー側の設定を貼り付けることは役に立ちます。

inDevがfalseの場合、すべてのリクエストを受け取り、静的な1ページのアプリケーションで応答するapp.get('*', ...)があります。したがって、APIリクエストも同じ応答を返します。ワイルドカード*の前に/apiと一致するルートを再構築する必要があります。いくつかの例が見つかりますhere