0

I'm writing a Vue JS front-end that is served by a C# webapi app. The webapi is specced to save images to an E: drive folder on its own machine, and provide src links for the UIs to consume.

All well and good, but now I'd like to test while running everything locally (and I don't have access to the E: drive). The problem: I can save images to my C: drive, but (for obvious reasons) the UI browser says "Not allowed to load local resource" when I try to display them.

Is the only solution to create some sort of remote hosting? Or is it possible to "spoof" a remote blob destination while the file is actually stored locally? Like Javascript's URL.createObjectURL method but in the webapi?

Lewie Lewis
  • 21
  • 5
  • "provide src links" - what are those links like? `file` links to the E: drive should fail as well... – NetMage Aug 20 '21 at 17:57
  • I believe [this answer](https://stackoverflow.com/a/15707802/2557128) explains what you want to do. Based on [this answer](https://stackoverflow.com/a/31190914/2557128) you can do this in Solution Explorer as well. Alternatively, you could debug using Local IIS and create a virtual directory to another location that way. – NetMage Aug 20 '21 at 18:01
  • @NetMage In live, the webapp saves to a local E: drive, but returns src links pointing to a remote blob location where the images are actually stored. I will check out that virtual directory thing. Cheers for that! – Lewie Lewis Aug 21 '21 at 09:32
  • @NetMage Oh wow that actually worked! How do I give you points!? – Lewie Lewis Aug 21 '21 at 10:12
  • You can upvote my comment (when you have enough points) but it isn't necessary. – NetMage Aug 23 '21 at 19:09

2 Answers2

1

Ok so NetMage's suggestion of creating a virtual IIS directory worked!

You can create a virtual directory for the IIS app you're running that points at a local folder.

  • Go to the applicationhost.config located in [solution folder]/.vs/[solution name]/config
  • Find the <sites> section in the config document
  • Find the site for your webapp (e.g. WebApi)
  • Add a new virtual directory element that specifies a remote path and points 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" /> <--THIS IS MY NEW ONE
        </application>
        <bindings>
          <binding protocol="http" bindingInformation="*:8080:localhost" />
        </bindings>
    </site>
<sites>
  • Now you can set the src of you image to point at "http://localhost:8080/Media/image.png", and the browser will think it's a remote resource (and no longer complain)!
Lewie Lewis
  • 21
  • 5
0

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

If that's something you're able to do, then you would need to update the API domain name in your front-end API constant (e.g. http://{APIDOMAIN}/your/route to http://localhost:5000/your/route) so that it's testing locally.

jomiwi
  • 1