打通全栈之用express作create-react-app的后台服务器如何解决跨域请求问题

背景:项目初期一直在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;
  1. 在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
  1. 现在打开一个新的终端窗口,在项目根目录下生成新的react应用
    $create-react-app client
  2. 修改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"
}
  1. 在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"
  }
}
  1. 然后在终端执行yarn安装依赖包,concurrenly是一个可以通过配置命令来同时启动两个服务器的插件。通过在package.json中的scripts下修改命令,可以同时开启服务端和客户端。
  2. 在项目根目录下新建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}`));
  1. 在client文件夹下的package.json中配置代理同上,端口和服务器端端口设为一直
  2. 在终端进入项目根目录,执行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)
            })
      }

推荐阅读更多精彩内容