Javascript 摆脱localhost:ReactAsync的3000个URL

交叉邮寄至

使用is时，通常会出现如下代码：

var UserPage = React.createClass({
  mixins: [ReactAsync.Mixin],

  statics: {
    getUserInfo: function(username, cb) {
      superagent.get(
        'localhost:3000/api/users/' + username,
        function(err, res) {
          cb(err, res ? res.body : null);
        });
    }
  },

  getInitialStateAsync: function(cb) {
    this.type.getUserInfo(this.props.username, cb);
  },

  ...

问题是它只能在服务器上运行的浏览器中正确运行

使用使URL相对的显而易见的解决方案（例如，

'/api/users/'+username

）有一个微妙的问题

在页面之间移动时，它似乎可以工作，但在页面重新加载或初始加载时不起作用。（在ReactJS应用程序中，您实际上不会在页面之间移动，只是URL发生了变化。）

这个问题的原因是服务器需要在服务器端呈现期间调用AJAX API，但是服务器不知道浏览器看到的页面来源（

http://www.example.com:3000

）

有没有办法告诉服务器端渲染器

---

（我已经想到了一个棘手的解决办法，即对客户端和服务器都使用完整的URL，但必须为运行代码的每个开发、测试和生产服务器显式配置。）

首先，为superagent使用一个简单的插件函数。这将重写绝对URL-但仅在服务器上。这意味着浏览器将向“/api”发出请求，服务器将向“localhost:port/api”发出请求

function fixUrlPlugin(port){
  return function fixUrl(req){
    if (process.browser) return req;
    if (req.url[0] === '/') {
        req.url = 'localhost:' + port + req.url
    }
    return req;
  };
}

现在，在代码中的某个地方，您将运行它并将输出保存在模块中

app.listen(8080);

然后你的代码就可以来了：

var urlPlugin = require('./path/to/that/module.js');

// ...

  statics: {
    getUserInfo: function(username, cb) {
      superagent.get('/api/users/' + username)
        .use(urlPlugin)
        .end(function(err, res) {
          cb(err, res ? res.body : null);
        });
    }
  },

---

我正在想办法解决这个问题（只使用AngularJS）所以我很想看看这会带来什么。@IanBrindley也能在服务器端渲染AngularJS吗？纯粹是实验性的。我从来没有深入研究过React，所以我只是在耳熟能详。@IanBrindley看看React，我曾经使用AngularJS，在那之前使用KnockoutJS，但我现在更喜欢React。我的用例是pages which通过websockets接收连续的数据流来不断更新。当然可以。我可能会尝试使用PhoneGap。谢谢，这看起来是一个不错的解决方案。我会尝试一下。

var urlPlugin = require('./path/to/that/module.js');

// ...

  statics: {
    getUserInfo: function(username, cb) {
      superagent.get('/api/users/' + username)
        .use(urlPlugin)
        .end(function(err, res) {
          cb(err, res ? res.body : null);
        });
    }
  },