2017-05-30 3 views
0

ExpressでNodeJSサーバを使用してthis article - "Using a Web Proxy"に記載されている構造を実現しようとしています。埋め込みiframeのhtmlにアクセスする必要があります。これはもちろん、同じ元のポリシーのために不可能です。回避策として、私は単純に私のサーバー上でiframeを要求し、それをクライアントに渡すことができると考えました。サーバ側のリクエストで同じ起点ポリシーを超えています - NodeJS/Express

サーバー上に/getIframeと呼ばれるエントリポイントを作成しました。クライアントが/getIframeを要求すると

、私のサーバーは、目的の場所にrequestを行い、その後、クライアントに送り返される(fsを使用して)HTMLドキュメントとしてページを保存します。これは正常に動作しますが、htmlに含まれるすべてのスクリプト/ cssは渡されません。requestはhtmlのみを取得します。

私はスクリプト/ cssを手作業でダウンロードしていますが、動作しています。ここにコードがあります。この

<iframe src={"/getIframe"}></iframe> 

のように呼び出されます

app.get('/getIframe', function(req, res, next) { 
    request("http://www.iframeurl.com/something", function(error, response, body) { 
    fs.writeFileSync('iframe.html', body, 'utf8'); 
    var html = fs.readFileSync('iframe.html', 'utf8') 
    res.send(html); 
    }); 
}) 

私は今、私が探していた行動を持っていますが、スクリプトを手動でダウンロードする必要が理想的ではありません。

ノードサーバーでページをリクエストし、すべてのコンテンツ(スクリプト、CSSなど)をクライアントに渡すだけの方法はありますか?

私は何を探していますが、私は@Dafuckが提供する答えを試みたし、それが所望のアドレスにリダイレクトするのは良い方法ですが

app.get('/getIframe', function(req, res, next) { 
    request("http://www.iframeurl.com/something", function(error, response, body) { 
    //pass on the requested page in a response with res.send(thePage) or render it with res.render(..) 
    }); 
}) 

UPDATE

のようなものですリソースの問題は依然として残ります。

は@Dafuckはまた、両方の溶液は、HTMLが転送され、そこから所望のアドレスにリダイレクト

app.use('/getIframe', function(req, res, next) { 
    req.pipe(request("http://www.iframeurl.com/something")).pipe(res); 
}) 

で達成することができ、以下の溶液

app.use('/getIframe', function(req, res, next) { 
    request.get({ url: "http://www.iframeurl.com/something" }).pipe(res); 
}) 

を示唆しました。それはいいですね。問題は、検索されたhtmlの<head>に含まれるすべてのスクリプト/リンクが、明らかに存在しないhttp://localhost:3000のようなサーバアドレスを指していることです。

例:http://www.example.comのHTMLは、上記の2つの方法のいずれかを使用して、この

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv=content-type content="text/html; charset=utf-8" lang=en> 
    <meta name=viewport content="width=device-width" /> 
    <link href="somecss.css" rel="stylesheet"> 
    <script type="text/javascript" src="somejs.js"></script> 
</head> 

<body> 
    Example 
</body> 

</html> 

のように見える私のサーバーから/getIframeを要求することはhttp://www.example.comの正しいHTMLを返しますが、ブラウザをフェッチしようとしますsomejs.jsおよびsomecss.cssからhttp://localhost:3000までであり、前述のように、すべてのリソースがhttp://www.emample.comにあるため失敗します。

http-proxyを使用してさらに別の方法を試しました。私は私がフェッチしようとしているソースからの奇妙な応答を得るよう最後の解決策が行き止まりであるよう

const httpProxy = require('http-proxy'); 
const apiProxy = httpProxy.createProxyServer(
    { 
    prependPath: false, 
    ignorePath: true, 
    changeOrigin: true, 
    xfwd: true, 
    } 
); 

app.all("/getIframe", function(req, res) { 
    apiProxy.web(req, res, {target: "http://www.example.com"}); 
}); 

悲しいことに、それはそうです。私の推測では、ソースはx-forwardヘッダーの追加を妨げているということです。

答えて

0

単にパイプこれまで主に似ている応答

request.post({ url: 'http://www.example.com', form: { foo: 'bar' }}).pipe(res); 

にページを戻すためにRESへの要求の結果:このコードは質問に答えるかもしれないが提供する、

request.get({url: "http://yolo"},function(err, response, body){ 
    if(err) return res.end(); 

    res.write(body); 
    res.setStatus(response.statusCode); 
    res.setHeader("Content-type", response.headers['content-type']); 
    return res.end(); 
}); 
+2

どのようにして問題が解決されるのか、そして/またはそれがなぜ解決されるのかに関する追加の文脈は、回答の長期的な価値を向上させるでしょう。 – Badacadabra

+0

更新された質問@Dafuckを見てください – Percolator

関連する問題