VueJS PDF web view

Question

Hi I am trying to add a pdf web view to my vue js vuetify project. I choose vue-pdf https://github.com/FranckFreiburger/vue-pdf for that.

My pdf src is directly come as a URL and code is like this.

<template>
  <pdf src="https://lovezwl.vip/pdf.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

Then I got an error

Access to fetch at 'https://lovezwl.vip/pdf.pdf' from origin 'http://localhost:8083' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

As far as I know CORS is something to deal with the server, not in the front end. But this moment I can't do anything in the back-end, I have to figure out a way from front-end. Is there any way to over come this error.

Or else do you guys know any other library works well with URLS as pdf sources?

Possible duplicate of [Loading cross-domain endpoint with jQuery AJAX](https://stackoverflow.com/questions/15005500/loading-cross-domain-endpoint-with-jquery-ajax). Ignore that the question is asking about jQuery and focus on the [accepted answer](https://stackoverflow.com/a/17299796/283366) — Phil, Sep 02 '19 at 05:30

score 0 · Answer 1 · answered Jan 19 '23 at 20:28

add "mode" no-cors in your request.

pdf.createLoadingTask({
                        url: 'www.example.com',
                        withCredentials: false,
                        httpHeaders: {
                            "mode": "no-cors",
                            "cache": "no-cache",
                        },
                    })

score -1 · Answer 2 · answered Sep 02 '19 at 05:42

-1

vue-pdf internally uses XMLHttpRequest. You need to configure the server where your PDF is located (lovezwl.vip) to send CORS headers to allow your local server (localhost) to fetch your document. At the very least send a header like:

Access-Control-Allow-Origin: "*"

Of course you can set a more restrictive header which better fits your case.

If you are not in control of the server and can not change the configuration then you can't embed this PDF file using vue-pdf.

answered Sep 02 '19 at 05:42

andypotato

703
5
10

OP says _"this moment I **can't do anything in the back-end**, I have to figure out a way from front-end"_. Also, this can be solved by using a proxy as outlined in the linked duplicate so it's incorrect to say that it cannot be done – Phil Sep 02 '19 at 05:45

VueJS PDF web view

2 Answers2