代码之家 › 专栏 › 技术社区 › Yaniv Peretz

React Dev环境创建新会话

session reactjs ajax node.js

Yaniv Peretz · 技术社区 · 7 年前

我有一个简单的NodeJS&当我将React构建部署到NodeJS中时,React Webapp可以正常工作。

当我单击登录时,服务器将检查授权并重定向到另一个页面。当我尝试从React构建(端口3000)运行webapp时,我注意到一旦登录,就会有一个新会话,因此从服务器(端口8080)获取数据将无法工作。

NodeJS-登录Api(路由到url即可);

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();
  });
}

-将在端口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日志(如您所见,有2个唯一的):
2017年11月13日星期一19:21:59 GMT+0200(IST):6tu0wi3Lt2RNEMD-SZHCzX2vJ0DljtHL
2017年11月13日星期一19:22:00 GMT+0200(IST):JRBGJXS109F3C\U GHR3GGKQLCC5底座

1 回复 | 直到 7 年前

BugHunterUK 7 年前

您的本地开发服务器和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)
      })
}