Not allowed to load local resource [Vue js with Axios]

Question

I get the path of the file using Axios.get : C:\Users\me\AppData\Local\Temp\lorem.csv

Axios syntax get

{
    // axios post generate
    const URL = '/api/report'+ '/generate'
    axios.post(URL, {
      report: this.editedItem.report,
      values: this.editedItem.values
    })
      .then(response => {
        this.fetchItem()
        const URL = '/api/report/path'
        axios.get(URL)
          .then(response => {
            this.path = response.data
          })
          .catch(err => {
            alert(err)
          })
      })
      .catch(err => {
        //what happen after error
        alert(err)
      })
    this.close()
  }

And I send that path to the a tag

<a :href="path" download target="_blank" class="tabs__item tabs__item--active" style="position: relative;"><u>{{ path }}</u></a>

but, console says : Not allowed to load local resource: [path]

I've tried [doesn't work]: - node: __dirname: false, __filename: false - blob type data - other browser, still same

The file is dynamic, server produce the file and save the file in the directory.

@NadyaPrabaningrum your not using the `vue-axios` library. the `vue-axios` lib would start out with `this.$http` or `this.axios`. But this is irrelevant to your issue. — Trevor V, Jul 04 '18 at 15:00
Possible duplicate of [Cannot open local file - Chrome: Not allowed to load local resource](https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource) — Trevor V, Jul 04 '18 at 15:01
if I'm not using axios, I can't get the path from api @TrevorVarwig — yoppie97, Jul 04 '18 at 15:12
@NadyaPrabaningrum If I've answered your question from which you comments I think I have you can mark it as answered. — li x, Jul 04 '18 at 16:54

li x · Answer 1 · 2018-07-06T08:56:11.760

4

You're using Axios as a frontend library, which means that it doesn't get access to the file system. Not allowed to load local resource: This is telling you that you're trying to break the sandbox that is in the browser.

Axios is specfically for calling api's though you can use it on things like Node that do have access to the file system with something like fs which is why you can still attempt to do this when using it in the browser.

edited Jul 06 '18 at 08:56

answered Jul 04 '18 at 14:56

li x

3,953
2
31
51

what should I do :( I wanna get the file from the path that I got – yoppie97 Jul 04 '18 at 15:14
Well you could serve it directly from the static files in your vue project using require that would be an option I suppose. The other option is to host the file somewhere and serve a link to the file instead. – li x Jul 04 '18 at 15:15
unfortunately, the file is dynamic – yoppie97 Jul 04 '18 at 15:18
@NadyaPrabaningrum Then you'll have to consider serving it from an external server instead and requesting the generated link using an API most likely. – li x Jul 04 '18 at 15:24
1

If your generating the file on the server-side what's stopping you from making it available from there and providing a link to the available document on the server which you can use in your vue app? – li x Jul 04 '18 at 15:31

Not allowed to load local resource [Vue js with Axios]

1 Answers1