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ヘッダーの追加を妨げているということです。
どのようにして問題が解決されるのか、そして/またはそれがなぜ解決されるのかに関する追加の文脈は、回答の長期的な価値を向上させるでしょう。 – Badacadabra
更新された質問@Dafuckを見てください – Percolator