ノードとreactjs axiosサーバーリクエストがjsonの代わりにindex.htmlファイルを返す

Question

私は、webpackでコンパイルされた反応フロントエンドとnodeとexpressで実行されているサーバーをセットアップしました。

プロダクションにデプロイすると、サーバーへのリクエストによって、データとともにjsonではなくdist.hフォルダにindex.htmlファイルが返されます。

私のwebpackコンパイル出力は./distにあります。ここで

は私のserver.jsファイルのルーティング一部である：ここでは

if (process.env.NODE_ENV === 'production') { 
    app.use(express.static('dist')); 
    const path = require('path'); 
    app.get('/', (req, res) => { 
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html')); 
    }); 
} 
// Use our router configuration when we call/
app.use('/', router); 

は私のWebPACKの設定ファイルの一部です：

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/client/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './client/index.js' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    filename: 'index_bundle.js' 
    }, 
    devServer: { 
    inline: true, 
    contentBase: './dist', 
    port: 8080, 
    proxy: { '/api/**': { target: 'http://localhost:3000', secure: false } } 
    }, 
    module: { 
    loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','react'], plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']}}, 
     {test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i, loader: 'file-loader?name=/images/[name].[ext]'}, 
     {test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader','resolve-url-loader']}, 
     {test: /\.scss$/, loaders: ['style-loader', 'css-loader','postcss-loader', 'sass-loader','resolve-url-loader']} 
     ] 
    }, 
    plugins: [HTMLWebpackPluginConfig] 
}; 

次のように私の要求は（APIルート/ APIです/シェフはユーザプロファイルを持つjsonを返します（開発中のテスト済み）：

export function listChefs() { 
    return function (dispatch) { 
    axios.get('/api/chefs') 
     .then((response) => { 
     dispatch({ 
      type: LIST_CHEFS, 
      payload: response.data 
     }); 
     }) 
     .catch((err) => { 
     errorHandler(dispatch, 'There was a problem. Please refresh and try again.'); 
     }); 
    }; 
} 

Axiosを使用しているクライアントから、実際に認識されていないapi URLにヒットしているため、単にindex.htmlファイルをサーバーにリダイレクトしています。

助けが必要ですか？

乾杯

Answer 1

おそらくこれは、問題のある行である：これは、すべての要求をキャッチbecuase

app.get('/*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html')); 
}); 

。 /*を/に変更した場合は修正されますか？

/*がすべてのリクエストを受け取り、index.htmlページを返すため、リクエストがルータに送信されないと思います。

試してみてください。

proxy: { 
    "/api": { 
    target: "https://other-server.example.com", 
    secure: false 
    } 
} 

お知らせむしろ "/ API/**" よりも "/ API" を次のように

app.get('/', (req, res) => { 
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html')); 
}); 

Answer 2

webpack docsによると、プロキシ設定を指定することができます。

また、contentBase設定にはpath.join(__dirname, "dist")で絶対パスを使用することをお勧めします。