Perspective - PDF Viewer Example?

Does anyone know if there is a good example of how to configure the PDF viewer component in perspective to display a PDF hosted on a separate website? I have a PDF stored on a sharepoint site that I can navigate to with the navigate component, but I would like to just directly display it with the PDF viewer.

You would just put the direct URL to the target resource in the component, but you’ll likely be stymied by either A: authentication, or B: CORS, which will prevent the target server from returning the PDF (unless you set specific CORS headers on the Sharepoint server).

@PGriffith Yeah, I am getting stymied. I get this message in the console, so I am assuming it is at least partially a CORS issue:

{URL} 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.

Do you have any advice for how to proceed?

We don’t expose any ability to rewrite the headers issued by the Perspective component, so you’d have to fix it on the server side.
You have two options:

  1. Figure out the right way to add a CORS header to the Sharepoint server. Some quick googling suggest this is ‘hard’; Sharepoint only wants to return CORS headers if you’re using OAuth to authenticate, which is another complication (and also won’t be supported by the PDF viewer component).
  2. If your sharepoint site is hosted on-prem, you could (theoretically) stand up a ‘reverse proxy’ server _on the same server and have it serve the correct CORS headers (while proxying actual download requests to the sharepoint server).

There’s a lot of ‘gotchas’ here, and I’m intentionally being vague because this is both a somewhat ‘fraught’ area (CORS exists for a reason, disabling it is not something to do trivially) and also because it depends a ton on your specific setup.

@PGriffith Even though you are being vague, I do appreciate the candidness of the answer. I will have to investigate the two options a little more. Thank you!

1 Like