服务器上线全攻略（五）——上线注意事项

react上线的疑难杂症

基础一堆配置就不说了，可以参考服务器配置

一. 数据发送

    const bodyParser = require('body-parser');
    app.use(bodyParser.urlencoded({ extended: false }))
    
    //想要直接获取post数据
    //解析application/json或者前台使用qs
    app.use(bodyParser.json())

二. 区分环境

本地不要使用localhost就算上传到服务器也会失败，直接使用服务器ip地址

    baseURL:"http://127.0.0.1:8989/", 本机测试地址
    baseURL:"http://49.235.18.58:8989/", 服务器地址

但每次改又贼费劲，于是必须来一波区分了。

三. 允许cookie传递

1. 客户端

因为用的axios

需要开启

withCredentials: true

    const service=axios.create({
      // baseURL:" https://www.easy-mock.com/mock/5d3911c824ff2f226dcaf0b4/boss",
      baseURL:"http://127.0.0.1:8989/",
      // baseURL:"http://49.235.18.58:8989/",
      timeout:10000,
      withCredentials: true //是否携带cookie
    })

使用express-session完成手机验证码

2. 服务器的设置

• 要允许发送cookie
• 要指定源

    app.use(cors({
      credentials: true, //同意发送cookie
      origin: 'http://localhost:3000', // web前端服务器地址
      // origin: '*' // 这样会出错
    }))

如果是多个服务器地址

    app.use(cors({
      credentials: true, 
      origin: ['http://localhost:3000',xxxxx]// web前端服务器地址
      // origin: '*' // 这样会出错
    }))

配置session

• 安装

cnpm i express-session -S

• 使用

    app.use(session({
      secret: 'code', //设置签名密钥
      resave: false, //强制保存，如果session没有被修改也要重新保存
      saveUninitialized: true,//如果原先没有session那么久设置，否则不设置
      cookie: {
          maxAge: 1000*60 //存储时长
      },
      rolling:true //如果一直浏览网页并不会因为session过期而产生影响
    })
);

• 读取

req.session.code

• 设置

req.session.code="100010"

• 注销

req.session.destroy()

流程

• 服务器的端口，需要在nginx配置，比如 http://49.235.18.58:8080
• 客户端的端口，需要在服务端配置允许跨域访问 http://49.235.18.58:8080
• 服务端的端口，需要在客户端里配置baseURL http://49.235.18.58:3030
• nginx的路径设置为客户端打包后的地址
• 使用pm2启动server.js