- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我正在设置一个 5 天天气预报 Web 应用程序,用于练习使用 MERN 堆栈与 API 进行交互。我使用 Axios.js 发送和响应请求;为了确保我的后端正常工作,我在开始与 API 通信之前首先开始构建后端。但是,我在前端设置的按钮(向我的服务器发送 get 请求以获取 json 数据)始终返回一个响应对象,其 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 对象作为数据发送到前端,但我不确定此设置中缺少什么。
最佳答案
您收到的响应似乎表明开发服务器正在为您提供 React 应用程序(请注意这一行: <script src="./dist/bundle.js"></script>
)。
当您在不同端口上同时运行两个服务器(例如 webpack 开发服务器和 Express 应用程序)时,您有几个选项来处理它们。
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"
}
}
}
在您的 Express 服务器中,为每个请求附加“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);
})
}
future
最终,您可能需要"/"
发送 React 应用程序,而不是使用纯静态方法。
在您的 Express 应用程序中,您可以执行以下操作:
// serve index.html
const path = require('path')
app.get('*', (req, res) => {
res.sendFile(path.resolve('<PATH TO BUILT APP index.html>'))
})
*
是“之前未定义的任何请求”,这意味着您应该在之后定义此请求所有 API 路由。这样,除非 /api/....
,否则您将响应应用程序。提出请求。 (在我看来)这样做的真正优点是,所有与服务器路由不匹配的请求都在 React 应用程序中处理。
关于json - MERN 与 axios 堆栈,响应对象返回 html 而不是 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49928935/
出于好奇 - 我知道有 LAMP - Linux、Apache、MySQL 和 PHP。但是还有哪些其他 Web 堆栈替代方案的缩写呢?像 LAMR - Linux、Apache、MySQL Ruby
我有以下代码。 var stackMapIn = []; var stackMapOut = []; var stackBack = []; stackMapOut.push("m1"); $scop
我遇到了导致我的堆栈无法恢复的情况,我别无选择,只能将其删除。使用完全相同的模板,我继续创建了另一个同名的堆栈。 The following resource(s) failed to create:
这是我第一次查看 Node 堆栈,自从我学习使用 Ruby on Rails 进行 Web 开发以来,我对一些基本的东西有点困惑。我了解 Rails 目录是什么样的。 demo/ ..../app .
本文实例讲述了C语言使用深度优先搜索算法解决迷宫问题。分享给大家供大家参考,具体如下: 深度优先搜索 伪代码 (Pseudocode)如下: ?
我正在按照指南 here ,它告诉我: The stack setup will download the compiler if necessary in an isolatedlocation (
同时 trying to debug a different question ,我安装了一个似乎与我安装的其他一些软件包冲突的软件包。 我跑了 $ stack install regex-pcre-
我花了几个小时创建了一个方法,该方法将从堆栈 s1 中获取 null 元素,并将它们放入 s2 中。然后该类应该打印堆栈。方法如下 import net.datastructures.ArraySta
我有一个类Floor,它有一个Stack block ,但我不知道如何初始化它。我曾尝试过这样的: public class Floor { private Stack stack;
我知道这个问题已经问过很多次了,但搜索一个小时后我仍然遇到问题。 我想使用一个 lifo 堆栈,它可以存储最大数量的元素。达到最大数量后,首先删除该元素并将其替换为新元素,这样在第一次弹出时我可以获取
我需要编写一个方法,压缩以执行以下操作; 目标compress方法是从栈s1中移除所有null元素。剩余(非空)元素应按其初始顺序保留在 s1 上。辅助堆栈 s2 应用作s1 中元素的临时存储。在该方
我正在尝试验证以下代码发生的顺序。 function square(n) { return n * n; } setTimeout(function(){ console.log("H
我需要一个字符数组,其中包含基于特定文件夹中文件数量的动态数量的字符数组。我能够通过初始化 char (*FullPathNames)[MAX_FILENAME_AND_PATHNAME_LENGTH
我正在编写一些日志逻辑并想要进行一些缩进。了解是否存在任何函数调用或某个函数是否已完成的最简单方法是查看堆栈/帧的当前地址。让我们假设堆栈颠倒增长。然后,如果 log() 调用中的堆栈地址小于前一次调
所以内存分段在x86-64中被放弃了,但是当我们使用汇编时,我们可以在代码中指定.code和.data段/段,并且还有堆栈指针寄存器。 还有堆栈段、数据段和代码段寄存器。 代码/数据/堆栈的划分是如何
void main() { int x = 5; // stack-allocated Console.WriteLine(x); } 我知道 x 是堆栈分配的。但是关于 x 的堆栈中
这是我关于 SO 的第一个问题。这可能是一个愚蠢的问题,但到目前为止我还没弄明白。 考虑下面的程序 Reader.java: public class Reader { public
java中有没有一种快速的方法来获取嵌套/递归级别? 我正在编写一个函数来创建组及其成员的列表。成员也可以是团体。我们最终可能会得到一组循环的组/成员。 我想在某个任意级别停止。 我知道我可以将变量保
考虑以下代码: struct A{...}; A a[100]; A* pa = new A[100]; delete[] pa; a/pa 元素的销毁顺序是由标准定义的还是实现定义的(对于第二种情况
我在下面有一些代码。此代码是一个基本的压入/弹出堆栈类,我将其创建为模板以允许某人压入/弹出堆栈。我有一个家庭作业,我现在要做的是创建一个具有多个值的堆栈。 所以我希望能够创建一个基本上可以发送三个整
我是一名优秀的程序员,十分优秀!