背景：项目初期一直在create-react-app脚手架配置好的环境下写静态页面，用react-router-dom v4.x作为路由模块，开启的是客户端服务器。
最近尝试将express脚手架生成的应用作为后台服务器，与react应用进行数据交互。
- 首先在终端生成一个express应用命名为react-backend，作为项目的根目录
$ express react-backend - 然后在./routes/user.js中修改代码为
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.json([
{id:1,username:"wyy"},
{id:2,username:"wyp"}
]);
});
module.exports = router;
- 在react-backend文件夹下运行express，并且指定端口为3001，避免与react的默认端口3000发生冲突。
~/wyy/react-backend% PORT=3001 node bin/www
打开localhost:3001看到如下画面，表示后台服务器应用已经在3001端口启动。
image.png
打开localhost:3001/users看到如下画面，就是我们刚才写在routes/users.js里面的json数据。
image.png
- 现在打开一个新的终端窗口，在项目根目录下生成新的react应用
$create-react-app client - 修改client文件夹下的package.js文件如下。添加proxy，指定代理服务器为3001端口运行的应用。
{
"name": "antd-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.2.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
},
"proxy": "http://localhost:3001"
}
- 在client文件夹下，启动react应用。
~/wyy/react-backend/client% npm start
此时打开localhost:3000，看到react应用的画面
7、在react组件中，可以通过在compenentDidMount(){}方法中写入fetch交互数据的代码，类似于ajax的$.get()
componentDidMount() {
fetch('path').then()
}
参考地址
https://daveceddia.com/create-react-app-express-backend/
https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/
https://www.cnblogs.com/LLLLily/p/7492118.html
20180320更新 更简单的配置方式
用express脚手架搭建的express太繁琐，下面是更简单的方法。
- 将create-react-app生成的整个文件夹直接放在项目根目录下的client文件夹中，然后在根目录下进行yarn init，package.json文件如下
{
"name": "antd-demo",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"express": "^4.16.2"
},
"devDependencies": {
"concurrently": "^3.5.0"
}
}
- 然后在终端执行yarn安装依赖包，concurrenly是一个可以通过配置命令来同时启动两个服务器的插件。通过在package.json中的scripts下修改命令，可以同时开启服务端和客户端。
- 在项目根目录下新建server.js，内容如下
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/api/hello', (req, res) => {
res.send({
express: 'Hello From Express'
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
- 在client文件夹下的package.json中配置代理同上，端口和服务器端端口设为一直
- 在终端进入项目根目录，执行yarn start即可同时开始客户端和服务器端。
20180322更新 补充一些代码才能完全解决跨域请求数据的配置问题
- 先对前面的步骤进行总结：
（1）在不同的端口开启客户端服务器和后台服务器
（2）在react的package.json中添加proxy - 然后介绍今天从前端表单发送数据到后台服务器的时候，跨域请求报错
（1）在server.js中添加代码
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
（2）在前端login组件中通过fetch方法发送数据的时候，添加一个允许跨域的属性
mode：“no-cors”
fetch('http://localhost:5000/post/api/1.0/create',
{
method:"POST",
mode:"no-cors",//跨域
body:JSON.stringify({
phone:values.phone,
password:values.password,
}),
headers:{
"Content-type":"application/json;charset=utf-8"
}
})
.then(function(values){
console.log('注册成功',values)
})
.catch(function(error){
console.log('注册失败',error)
})
}
