リモートの場所を偽装してローカル ファイルを取得する

Question

C# webapi アプリケーションによって提供される Vue JS フロントエンドを作成しています。 Webapi は、イメージをマシン上の E: ドライブ フォルダーに保存し、UI を使用するための src リンクを提供するために必要です。

すべて問題ありませんが、ローカルで実行しながらテストしたいと思います (E: ドライブにアクセスできません)。問題は、画像を C: ドライブに保存できるのですが、(明らかな理由により) 画像を表示しようとすると、UI ブラウザに「ローカル リソースの読み込みは許可されていません」と表示されることです。

何らかのリモート ホスティングを作成する唯一の解決策はありますか?それとも、ファイルが実際にはローカルに保存されているときに、リモート BLOB ターゲットを「偽装」することは可能ですか? Javascript の URL.createObjectURL メソッドに似ていますが、WebAPI ではどうですか?

Answer 1

API のソース コードにアクセスできる場合は、ローカル マシンに保存していないいくつかの環境変数が必要な場合や、何らかの構成が必要な場合があることを考慮して、API をローカルでビルドして実行できる可能性があります。運用環境の外でローカルで実行できるようにします。

これができる場合は、フロントエンド API 定数の API のドメイン名を更新する必要があります (例: http://{APIDOMAIN}/your/route を http://localhost に更新します)。ローカルでのテストには 5000/your/route)。

Answer 2

わかりました。仮想 IIS ディレクトリを作成するという NetMage の提案はうまくいきました。

ローカル フォルダーを指す、実行中の IIS アプリケーション用の仮想ディレクトリを作成できます。

• [ソリューション フォルダー]/.vs/[ソリューション名]/config にある applicationhost.config ファイルを開きます
• 設定ファイルで <sites> セクションを見つけます
• Web アプリケーション (WebApi など) のサイトを見つけます
• リモート パスを指定し、ローカル フォルダーを指す新しい仮想ディレクトリ要素を追加します:

リーリー

• これで、画像の src を「http://localhost:8080/Media/image.png」に設定できるようになり、ブラウザはそれをリモート リソースであると認識します (これ以上文句を言う必要はありません)。