I am trying to run the embed viewer script on my desktop, as it states in the sample that you don't even need credentials to test the viewer. I have entered my credentials anyway, because I keep getting a CORS error. The pdf viewer does appear to be embedded in the browser, but my pdf file which is stored in a folder called "news" on my website does not appear in the viewer. The error message says: "File preview not available, please reload to try again." In the web developer console it shows the error is related to CORS. I cannot find an easy explanation to correct this error, so I appreciate any help with this problem. Here is my test code:
Thanks for trying out the View SDK, CORS is mechanism used by browsers for controlling the access to your resources (your PDF file in this case), more details about it can be found here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS. When View SDK try to render the PDF file, it first downloads the file from the provided location, which requires CORS need to be enabled. It can be easily achieved by 2 ways:
1. Enable the CORS header on your resource where you want to use it. Above link can help you in that.
2. Or keep the PDF Viewer and resource on the same domain. For example, if your PDF file is present at https://abc.com/news/xyz.pdf then your PDF viewer should be same domain (for example at https://abc.com/viewer/test.html).
Let us know if it helps or any other information is required. Thanks.
Please enable CORS for your resources on your server or use the View SDK on the same domain as your resource. Hope this clarifies.
Sure, I agree CORS mechanism is not a simple one. But with View SDK usecase, it won't be a big problem to solve. Let's take your use case and try to solve for that. To proceed I will need some extra info but anyway let me list down all the cases. As you will be creating your own html file using View SDK (as you have shown above in your test code), now solving the CORS problem will boil down to where are you going to host this html file.
Given your PDF files resides at www.mydomain.org
1. If you host html file on same domain (www.mydomain.org ), then it will just work and you won't get into any CORS issue at all.
2. If you plan to host html file on different domain/subdomain (www.mydomain2.com or www.subdomain.mydomain.com) then the PDF files need to provide the header which allow CORS, mainly indicating that these other domain can read PDF content. On how to do it, is going to depend on how are you stroing the PDF files on www.mydomain.org.
Let me know if it helps.
Thank you for that help. I am hosting the html pages and the pdf files on the same domain server, so now I am not getting CORS error, but there is another error:
It says: "TypeError: document.querySelector(...) is Null"
Here is the exact code I am using:
To view this behavior, the web page is here: https://shcsfarmington.org/2020/news-test.html
I would really like to use this viewer if I can get it to work. I appreciate all help. Thanks.
We will be more than happy to help you out to use this Viewer.
Your web page https://shcsfarmington.org/2020/news-test.html is giving some error (AOS is not defined). Could you please check? I can help you more once View SDK comes into the picture.
I forgot to say - in order to open the viewer just click on the first newsletter image, under "May 4, 2020". Please let me know where to define AOS and how? It is not in the sample code from the Adobe demo?
This error is something specific to your project. The above sample code is self-sufficient if hosted under https://shcsfarmington.org domain. Please do check the network logs for more insights, if PDF is being downloaded or not.
OK, this is very frustrating now. I have simplified my test - I am only using the code from the Adobe View SDK demo and nothing else on my new test page at https://www.shcsfarmington.org/pdf-view.html
I have created a new API for the View SDK, and made sure that the "allowed domain" is www.shcsfarmington.org, and I have placed the new credential in my code, which is now as follows:
I have also placed the pdf file I am trying to load in the same "home" directory, where the pdf-view.html page is located. After all of these changes I am once again receiving the CORS error, which says this:
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://shcsfarmington.org/Newsletter_050420.pdf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."
I do not want to give up on this, but how hard can it be? Can you point out what is wrong with my code or my logic? I appreciate any help. Thanks.
Looks like you are passing PDF URL which is on different subdomain (notice no "www." present in PDF URL). Please try PDF URL as "https://www.shcsfarmington.org/Newsletter_050420.pdf" and check. Thanks.
It works now!! I am glad it was something simple, and not surprised it was my own lack of care in the coding. Thanks for everyone who helped!!
Access to fetch at 'https://local-xxxx/BMS.pdf' from origin 'http://localhost:8000' 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.
how can i solve it
i have given all the permission and my bucket is also public accessible
You can set CORS and other http headers per resource on s3 files.
it is not working can you help me solve this problem. my aws bucket is public accessible . i think there is something i need to do in with my code. can you help me in that
This is separate from S3 bucket access. You have to add a header for the S3 resource. You need to understand what CORS is, how it works, and how to write a JSON rule for a resource. Then you can use the info at https://aws.amazon.com/premiumsupport/knowledge-center/s3-configure-cors/
If CORS is too awkward then everything must be on the same server.
ok thanx. i have not added the get request on my aws cors setting. now it is working.