擺脫本地主機：用於ReactAsync

3000網址交叉張貼到https://github.com/andreypopp/react-async/issues/34 擺脫本地主機：用於ReactAsync

當使用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爲客戶端和服務器，但必須明確爲運行代碼的每一開發，測試和生產服務器進行配置。）

來源

2014-10-20 fadedbee

我在想出一個解決的辦法（僅使用AngularJS）的過程，所以我很感興趣看看這是怎麼回事。 – 2014-10-20 12:23:02

@IBrindley AngularJS能渲染服務器端嗎？ – fadedbee 2014-10-20 12:31:59

純粹是實驗性的。我從來沒有深入研究React，所以我只是將耳朵放在地上。 – 2014-10-20 12:43:27

要開始，請使用superagent的簡單插件函數。這會重寫絕對網址 - 但只能在服務器上。這意味着瀏覽器會向'/ 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); 
     }); 
    } 
    },

來源

2014-10-21 11:09:56 FakeRainBrigand

謝謝，這看起來像一個不錯的解決方案。我會試一試。 – fadedbee 2014-10-21 11:45:59

擺脫本地主機：用於ReactAsync

回答

相關問題