Get local files by masquerading as remote location

Question

I'm writing a Vue JS frontend served by a C# webapi application. Webapi is required to save the image to the E: drive folder on your machine and provide a src link for UI consumption.

Everything is fine, but now I want to test while running locally (and I don't have access to the E: drive). The problem is: I can save the images to the C: drive, but (for obvious reasons), when I try to display them, the UI browser says "Loading of local resources is not allowed".

Is the only solution to create some kind of remote hosting? Or is it possible to "fake" a remote blob target when the file is actually stored locally? Like Javascript's URL.createObjectURL method, but in a webapi?

Answer 1

If you have access to the source code of the API, you may be able to build and run it locally, taking into account that it may require some environment variables that you do not have stored on your local machine and require some configuration to be able to run it locally run outside of a production environment.

If you are able to do this, then you need to update the domain name of the API in the front-end API constants (e.g. update http://{APIDOMAIN}/your/route to http://localhost:5000/your/ route) for testing locally.

Answer 2

Okay, NetMage's suggestion of creating a virtual IIS directory worked!

You can create a virtual directory for your running IIS application that points to a local folder.

• Open the applicationhost.config file located at [solution folder]/.vs/[solution name]/config
• Find the <sites> section in the configuration file
• Find the site of your web application (e.g. WebApi)
• Add a new virtual directory element specifying the remote path and pointing to your local folder:

<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>

• Now you can set the src of the image to "http://localhost:8080/Media/image.png" and the browser will think it is a remote resource (no more complaining)!