外部サーバーへのアクセスがあり、同じドメインサーバーではない場合、外部サーバーからデータを送信/取得するための最良の方法

Question

私は実行しているサービスにデータ（ファイルアップロードを含む）を提出するためにSDKタイプのものに取り組んでいます。

私は研究を行っており、XSSの制限によってブロックされることなく、データを送信して外部サーバー（私のサーバー）に応答する最良の方法を見つけようとしています。

現在の設定はほどです：

顧客がサーバをホストして、私のサーバー側のライブラリを使用しています。 私のサーバーから必要なJSをロードするクライアントページを生成します。 クライアントページは、サーバーからデータを要求します（ページロード時にSDKから渡されなかった場合）、その情報をユーザーに表示します。 ユーザーはイベントをトリガーし、データを（潜在的にファイルのアップロードを含む）私のサーバーに送ります（SDKライブラリーを持つローカルサーバーではありません）。 私のサーバは成功または失敗に応答し、クライアントJSはそれを適切に処理します。

メモ： 私のサーバーは私が完全に制御できるプライベートPHPサーバーです。 すべてのデータを顧客のサーバーから（私のライブラリーを使用しているように）ルーティングすることはできますが、それは理想的ではありません。顧客の設定がより必要で、エンドユーザーの方が遅く、ファイルのアップロードを処理するのが問題ですそれらのファイルを自分のサーバーではなくサーバー上に置いて欲しい。 ファイルのアップロード入力がiframe内にある可能性があります。これは私のサーバーにアップロードを直接許可しますか？ お客様はAPIキーを使用してライブラリを使用しているため、ページトークンのフロントエンドに認証トークンを渡すことでクライアントのリクエストを認証できます。

私はアーキテクチャの変更が可能ですが、これは私にとって理想的な設定です。私はフロントエンドの方法がこれを実装するために最善であるか分かりません。

Answer 1

JSONPあなたがGETリクエストを行う必要があるだけであれば動作しますが、ファイルのアップロードについては言及しているので、POSTを行う必要があるようです。

あなたの場合、Cross-Origin Resource Sharing (CORS)が動作する可能性があります。簡単な説明は、別のドメインにXMLHttpRequestでリクエストすると、ブラウザがOriginという名前の余分なヘッダーを送信するというものです。あなたのサーバーは、*の値を持つAccess-Control-Allow-Originという名前の追加ヘッダー、またはOriginヘッダーにブラウザが送信した値で応答する必要があります。 CORSを使用する際にはいくつかのニュアンスや問題点がありますので、上記のリンクをよく読んで徹底的に説明することをお勧めします。

CORSを設定すると、XMLHttpRequest〜upload filesを使用できるようになります。