Question

我有一个简单的NodeJS＆amp;当我将React构建部署到NodeJS时，React Webapp可以正常工作。

当我点击登录时，服务器将检查授权并重定向到另一个页面。当我尝试从React构建（端口3000）运行webapp时，我注意到一旦登录，我有一个新会话，因此从服务器（端口8080）获取数据将不起作用。

NodeJS - 登录Api（路由到网址将起作用）;

router.post('/',approveUserPassword, function(req, res){

  console.log(new Date() + ":" + req.sessionID)

  if(req.session.auth){
    let url = 'http://localhost:3000/edit-menu'; 
    res.redirect(url);

  }
  });
function approveUserPassword(req, res, next) {

  let email = req.body.email;
  let psw = req.body.psw;
  let query = "SELECT id FROM Users "             +
              "WHERE email= '" + email + "' AND " +
              "password='" + psw + "'"            ;

  con.query(query, function (err, result, fields) {
    if (err) throw err;

    if(result.length > 0){
      req.session.auth = true;
      req.session.rest_id = result[0].id;

    }else{
      req.session.auth = false;
    }

    next();
  });
}

React - 将在端口3000上失败，因为新会话将不会通过身份验证。

componentDidMount(){
    let url ='http://localhost:8080/api/menu';
    fetch(url, {credentials: 'same-origin' })
          .then(response => response.json())
          .then(json => {
            this.setState({data: json});
            console.log(json)
          })
  }

API /菜单

function checkAuth(req, res, next) {
  console.log(new Date() + ":" + req.sessionID)

  if(!req.session.auth){
    res.json("no auth for menu");

    }else{
      next()

    }
};


router.get('/', checkAuth, function(req, res){

    let sql = "SELECT * FROM Menu_Items " +
                "WHERE rest_id=" + req.session.rest_id + ";";

    con.query(sql, function (err, result, fields) {
      if (err){
        console.log(sql);
        throw err;
      }

      res.json(result);
    });

});

以下是会话的NodeJS日志（如您所见，有两个唯一的）：
2017年11月13日星期一19:21:59 GMT + 0200（IST）：6tu0wi3Lt2RNEMD-SZHCzX2vJ0DljtHL
Mon 11 13 2017 19:22:00 GMT + 0200（IST）：JRBGJjxS109F3C_ghr3ggkQlcC5bapsE

Answer 1

您的本地开发服务器和API在不同的端口上运行。由于Same Origin Policy，浏览器将拒绝任何不在同一域或端口上的请求。

我已经检查了回购邮件并且使用了create-react-app，这意味着您应该能够设置代理。我自己已多次这样做了。

在client-src/package.json中添加以下行：

"proxy": "http://localhost:8080/"

这将代理对API的请求。您现在可以像这样调用API：

componentDidMount(){
    let url ='http://localhost:3000/api/menu';
    fetch(url, {credentials: 'same-origin' })
      .then(response => response.json())
      .then(json => {
        this.setState({data: json});
        console.log(json)
      })
}

React Dev环境创建一个新的Session

1 个答案: