Erhalten Sie lokale Dateien, indem Sie vorgeben, ein Remote-Standort zu sein

Question

Ich schreibe ein Vue JS-Frontend, das von einer C#-Webapi-Anwendung bereitgestellt wird. Webapi ist erforderlich, um das Bild im Laufwerksordner E: auf Ihrem Computer zu speichern und einen Quelllink für die UI-Nutzung bereitzustellen.

Alles ist in Ordnung, aber jetzt möchte ich testen, während es lokal ausgeführt wird (und ich habe keinen Zugriff auf das Laufwerk E:). Das Problem ist: Ich kann die Bilder auf dem Laufwerk C: speichern, aber (aus offensichtlichen Gründen) sagt der UI-Browser beim Versuch, sie anzuzeigen: „Das Laden lokaler Ressourcen ist nicht zulässig.“

Ist die einzige Lösung, eine Art Remote-Hosting zu erstellen? Oder ist es möglich, ein Remote-Blob-Ziel zu „fälschen“, wenn die Datei tatsächlich lokal gespeichert ist? Wie die URL.createObjectURL-Methode von Javascript, aber in einem Webapi?

Answer 1

如果您可以访问API的源代码，您可能可以在本地构建和运行它，需要考虑到它可能需要一些环境变量，而这些变量您在本地机器上没有存储，并且需要一些配置才能在当前的生产环境之外运行。

如果您能够做到这一点，那么您需要在前端API常量中更新API的域名（例如，将http://{APIDOMAIN}/your/route更新为http://localhost:5000/your/route），以便在本地进行测试。

Answer 2

好的，NetMage的建议创建了一个虚拟的IIS目录，起作用了！

您可以为正在运行的IIS应用程序创建一个虚拟目录，指向一个本地文件夹。

• 打开位于[solution folder]/.vs/[solution name]/config的applicationhost.config文件
• 在配置文件中找到<sites>部分
• 找到您的Web应用程序的站点（例如WebApi）
• 添加一个新的虚拟目录元素，指定远程路径并指向您的本地文件夹：

<sites>
    <site name="App.WebApi" id="1">
        <application path="/" applicationPool="App.WebApi AppPool">
          <virtualDirectory path="/" physicalPath="C:\Repos\Code\App.WebApi" />
          <virtualDirectory path="/Media" physicalPath="C:\Media" /> <--这是我新增的
        </application>
        <bindings>
          <binding protocol="http" bindingInformation="*:8080:localhost" />
        </bindings>
    </site>
<sites>

• 现在，您可以将图像的src设置为"http://localhost:8080/Media/image.png"，浏览器将认为它是一个远程资源（不再抱怨）！