Question

所以我正在建立一个5天的天气预报网络应用程序，用于使用MERN堆栈与API进行交互练习。我正在使用Axios.js发送和响应请求;为了确保我的后端工作，我开始构建它，然后开始与API通信。但是，我在前端设置的按钮（它向我的服务器发送json数据的get请求）总是返回一个响应对象，其response.data的值为：

RESPONSE: <!doctype html>
<html>
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

而不是

RESPONSE: "hello there!"

表示如下的JavaScript：

{data: "hello there!"}

我知道在发送和接收这些请求时我可能错过了一步，但在对此进行研究后，我仍然不确定为什么我没有收到预期的结果。我的文件设置如下：

-weather_forcast
  -client
    -src
      -components(empty)
      app.jsx
  -public
    -dist
      bundle.js
    index.html
  -server
    -routes
      routes.js
    index.js
  package.json
  webpack.config.js

目前包含代码的文件内容为：

app.jsx

    import React, {Component} from 'react';
    import ReactDOM, {render} from 'react-dom';
    import axios from 'axios';
    // import daysOfWeek from './daysOfWeek.jsx';

    class App extends Component {
      constructor() {
          super();
          this.state = {
          }
          this.getData = this.getData.bind(this);
      }

      getData() {
          axios.get('/')
          .then((response) => {
              console.log("RESPONSE:", response.data);
          })
          .catch((error) => {
              console.log(error);
          })
      }

      render() {
          return(
              <div>
                  <button onClick={this.getData}>Hello world</button>
              </div>
          )
      }
  }

  render(<App/>, document.getElementById('app'));

的index.html

<!doctype html>
<html>
    <head>
        <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="app"></div>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

routes.js

let express = require('express');
let router = express.Router();

router.get('/', (req, res) => {
    res.send({data:'hello there!'});
});

module.exports = router;

index.js

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const router = require('./routes/routes.js');
const app = express();
let port = 8000;

app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../public')));

app.use('/', router);

app.listen(port, () => {
  console.log(`express is listening on port ${port}`);
});

webpack.config.js

const path = require('path');
const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/public/dist');

module.exports = {
    entry: `${SRC_DIR}/app.jsx`,
    output: {
        filename: 'bundle.js',
        path: DIST_DIR
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: SRC_DIR,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
}

在我添加“routes”文件夹并设置了我的index.js文件之前，同样的问题出现了：

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const router = require('./routes/routes.js');
const app = express();
let port = 8000;

app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../public')));

app.get('/', (req, res) => {
  res.send({data: "hello there!"});
);

app.listen(port, () => {
  console.log(`express is listening on port ${port}`);
});

任何帮助将不胜感激！我似乎无法将我的json对象作为数据提供给前端，但我不确定我在此设置中缺少什么。

Answer 1

您获得的响应似乎表明开发服务器正在为您提供反应应用程序（请注意以下行：<script src="./dist/bundle.js"></script>）。

当您在不同的端口（例如webpack dev服务器和您的快速应用程序）上同时运行两个服务器时，您有几个选项可以处理它们。

1）CORS 以其完整地址向您的其他服务器发出请求：

"http://localhost:8000/<path>"

除非您的服务器与React应用程序完全分开并允许CORS，否则通常不建议这样做。鉴于服务器和客户端都存在于同一个存储库中，您似乎也希望服务器也能为您的React应用程序提供服务。

2）代理请求

See Docs For More Info

Webpack使您能够代理服务器请求。如果您在开发中使用不同的端口，这很有用，但您的服务器和react应用程序将在生产中一起使用。在webpack.config.js中，您可以执行以下操作：

<强> webpack.config.js：

module.exports = {
  // prior rules
  module: {
    // module rule followed by comma
  },
  devServer: {
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
}

在您的快速服务器中，使用'api'附加每个请求，如下所示：/api/<path>

<强>路由：

app.use('/api', router);

<强> app.jsx

getData() {
  axios.get('/api')
  .then((response) => {
    console.log("RESPONSE:", response.data);
  })
  .catch((error) => {
    console.log(error);
  })
}

未来

最终，您可能希望"/"发送React应用程序，而不是使用纯静态方法。

在您的快递应用中，您可以执行以下操作：

  // serve index.html
  const path = require('path')
  app.get('*', (req, res) => {
    res.sendFile(path.resolve('<PATH TO BUILT APP index.html>')) 
  })

*是“之前未定义的任何请求”，这意味着您应该在所有api路由之后定义 。这样，除非发出/api/....请求，否则您将提供反应应用。这样做的真正优势（在我看来）是所有与服务器路由不匹配的请求都在React应用程序中处理。

MERN与axios堆栈，响应对象返回html而不是json

1 个答案: