search

FranckFreiburger / vue-pdf

vue.js pdf viewer
MIT License
2.24k stars 524 forks source link

getting cors error trying to use pdf url links #273

Open opeyemidy opened 3 years ago

opeyemidy commented 3 years ago

1 Access to fetch at 'http://www.pdf995.com/samples/pdf.pdf' from origin 'http://localhost:33477' 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.

i'm getting this error anytime i try using pdf url links (like the one in the error above) online but works fine if src is specified to load pdf files on the system. please why am i having this issue.

horaciosolorio commented 3 years ago

Same issue any help?

DanielASMPT commented 3 years ago

CORS-Errors are server sided and for security. You should understand what cors is, this has nothing to do with the plugin. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

guibrancopc commented 3 years ago

@opeyemidy and @horaciosolorio, I was having the same issue and it seems that the CORS setup is from the pdf file server side.

So, I've just found another pdf sample with the CORS opened and now it works fine for my development server.

https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK

I got this sample from this repository.

thatygama commented 10 months ago

You should use CORS Proxy Servers to solve browser CORS problems.

On this case, you have 2 options: 1°) Creating your own server. There are repositories available on GitHub with the necessary code, allowing you to clone the repository and set up your server. For instance, you can check out this repository for a ready-to-use solution: https://github.com/Rob--W/cors-anywhere. Creating your own server is more secure since you have control over your server's maintenance and uptime.

Or 2°) Alternatively, there are free proxy servers already in operation that you can use. CorsProxy.io is one such service. It provides a straightforward and free proxy to bypass CORS errors. To use this service, prepend the proxy URL https://corsproxy.io/? before the destination URL. The service will then make the request to the URL with the correct CORS headers on your behalf.

For your specific case, here's how you could modify your source URL to access the file: const url = 'https://corsproxy.io/?' + encodeURIComponent('http://www.pdf995.com/samples/pdf.pdf');

Remember that relying on external CORS proxies for production environments is not recommended due to stability and security concerns. It's better to manage CORS on your server or use a trusted, secure proxy service.