Question

在运行我的前端反应代码时，我无法尝试运行我的API。我正在使用webpack和webpack dev服务器，但问题似乎是他们运行自己的服务器，而我的apis由另一个运行。我想我可以让我的应用程序完全在我的快速后端运行但是无法以某种方式使用webpack dev服务器来运行它们。我的后端快递节点看起来像这样

    const express = require('express');
const bodyparser = require('body-parser');
const app = express();

require('./api/findMedia.js')(app)


var PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
    console.log('server is working : ')  

})

我的webpack配置看起来像这样。您可以忽略我的代理密钥。我正在测试webpack dev服务器以同时运行我的快速服务器。

  var webpack = require("webpack");
var path = require('path');

    module.exports = {
        entry: {
            app: "./src/app.js"
        },
        output: {
            filename: "build/bundle.js",
            sourceMapFilename: "build/bundle.map"
        },
        devtool: '#source-map',
        devServer : {
            historyApiFallback : true,
            hot : true,
            inline: true,
            host: 'localhost',
            port: 3000,
            stats: 'errors-only',
            proxy : {
                '/api': {
                    host: 'localhost',
                    protocol: 'http',
                    port: 8080


                }
            }
        },
        plugins : [new webpack.HotModuleReplacementPlugin({multiStep: true})],
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015']
                    }
                },
                {
                    test: /\.css$/,
                    loader: 'style!css'
                }
            ]
        }
    }

最后我在前端使用axios和我的componentdidmount中的简单发布请求调用它

    componentDidMount(){
    axios({
        method: 'post',
        url: '/find/media'
    }).then((response)=>{
        console.log('post request to mongo data from front end a success: ' + response)
        console.log(response.data.findArticles)
    }).catch((error)=>{
        console.log('error'+error)
    })
}

Answer 1

webpack-dev-server创建自己的服务器，就像你说的那样。如果要同时运行webpack-dev-server和express，则需要devServer配置对象中的代理密钥。

proxy : { '/api': 'http://localhost:8080' }

使用您的设置，可以做的是将以/ api开头的任何请求代理到http://localhost:8080/api。因此，从您的React代码中，您可以这样做：

axios({ method: 'post', url: '/api/find/media' ... })

哪个webpack-dev-server将代理http://localhost:8080/api/find/media。

如果您的快速路由器正在侦听'/ find / media'，则devServer.proxy配置对象具有rewritePath密钥。

proxy : { '/api': { target: 'http://localhost:8080', rewritePath: {'^/api' : ''} } }

如果你想快递处理一切，那么我认为你可以使用webpack-dev-middleware。

使用与Webpack捆绑的React测试API

1 个答案: