背景：项目初期一直在create-react-app脚手架配置好的环境下写静态页面，用react-router-dom v4.x作为路由模块，开启的是客户端服务器。
最近尝试将express脚手架生成的应用作为后台服务器，与react应用进行数据交互。

1. 首先在终端生成一个express应用命名为react-backend，作为项目的根目录
   $ express react-backend
2. 然后在./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;

3. 在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

4. 现在打开一个新的终端窗口，在项目根目录下生成新的react应用
   $create-react-app client
5. 修改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"
}

6. 在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太繁琐，下面是更简单的方法。

1. 将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"
  }
}

2. 然后在终端执行yarn安装依赖包，concurrenly是一个可以通过配置命令来同时启动两个服务器的插件。通过在package.json中的scripts下修改命令，可以同时开启服务端和客户端。
3. 在项目根目录下新建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}`));

4. 在client文件夹下的package.json中配置代理同上，端口和服务器端端口设为一直
5. 在终端进入项目根目录，执行yarn start即可同时开始客户端和服务器端。

20180322更新 补充一些代码才能完全解决跨域请求数据的配置问题

1. 先对前面的步骤进行总结：
   （1）在不同的端口开启客户端服务器和后台服务器
   （2）在react的package.json中添加proxy
2. 然后介绍今天从前端表单发送数据到后台服务器的时候，跨域请求报错
   （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)
            })
      }