交叉过账到https://github.com/andreypopp/react-async/issues/34
当使用react async时,通常会有如下代码:
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,但必须为运行代码的每个开发、测试和生产服务器明确配置。)
首先,为超级代理使用一个简单的插件函数。这将重写绝对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);
module.exports = fixUrlPlugin(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);
});
}
},