所以我正在设置一个 5 天的天气预报 Web 应用程序，用于练习使用 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'));
索引.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>
路线.js
let express = require('express');
let router = express.Router();
router.get('/', (req, res) => {
res.send({data:'hello there!'});
});
module.exports = router;
索引.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"文件夹并像这样设置我的索引.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 对象作为数据发送到前端，但我不确定我从此设置中缺少什么。
您得到的响应似乎表明开发服务器正在为您提供 react 应用程序(请注意行：<script src="./dist/bundle.js"></script>)。
当您在不同的端口(例如 webpack 开发服务器和您的快速应用程序)上同时运行两台服务器时，您有几个选项来处理它们。
1) CORS使用其完整地址向您的其他服务器发出请求：
"http://localhost:8000/<path>"
通常不建议这样做，除非您的服务器与您的 React 应用程序完全分开并允许 CORS。鉴于服务器和客户端都存在于同一个存储库中，您似乎也希望您的服务器为您的 React 应用程序提供服务。
2) 代理请求
有关详细信息，请参阅文档
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 应用程序中处理。