Skip to main content
R
rgrinage_0904
Participating Frequently
May 11, 2020
Answered

How Do I Avoid CORS Errors with View SDK?

  • May 11, 2020
  • 1 reply
  • 10003 views

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:

<html>
<head>
  <title>Test 2</title>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
</head>
<body>
  <div id="adobe-dc-view"></div>
  <script type="text/javascript">
   document.addEventListener("adobe_dc_view_sdk.ready", function()
   {
      var adobeDCView = new AdobeDC.View({clientId: "<redacted>", divId: "adobe-dc-view"});
      adobeDCView.previewFile(
     {
         content:  {location: {url: "https://<URL redacted>/2020/news/Newsletter_050420.pdf"}},
		 downloadWithCredentials: true,
         metaData: {fileName: "Newsletter_050420.pdf"}
     });
   });
  </script>
</body>
</html>
    Correct answer Abhishek Arora

    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:

    <body>
	
	<div id="adobe-dc-view" style="width:70%;height:500px;padding-top:100px"></div>
	<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
	<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){
		var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://shcsfarmington.org/Newsletter_050420.pdf"}},
			metaData:{fileName: "Newsletter_050420.pdf"}
		}, {});
	});
	</script>
</body>

    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.

    1 reply

    A
    Adobe Employee
    Abhishek Arora
    Adobe Employee
    May 11, 2020

    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.

    R
    rgrinage_0904Author
    Participating Frequently
    May 11, 2020

    Thank you for that info, but I need a little more clarity if possible.  I understand the View SDK viewer script resides at https://documentcloud.adobe.com and my PDF files reside at www.mydomain.org.  The link you suggested to allow CORS contains several different scenarios with explanations that I do not fully understand.  It appears that the only place I am allowed to enter "header" information would be in my own HTML page.  I cannot find a clear answer as to the exact code my header would need to include so that the resources (PDF files) on my server would be allowed to be opened by the viewer script at the Adobe server.  It appears the only other alternative would be to have the script hosted on my server (I don't know how to do that) or have my PDF files uploaded to the Adobe server (I do not see any information on how to do this either).  Sorry for my lack of knowledge, I have worked quite a bit with websites, HTML, and a little Javascript, but this process does not seem simple to me.  Thanks for any help.

    B
    Community Manager
    brajeshk12751679Community Manager
    Community Manager
    May 12, 2020

    Please enable CORS for your resources on your server or use the View SDK on the same domain as your resource.  Hope this clarifies.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices