The `Viewer` component supports various sources of documents, including a base 64 string, an array of bytes, or a URL. The URL can represent an internal document that belongs to the same server as the current server.
If you want to use a document that is hosted on a remote server such as Amazon S3 bucket, Azure Blob Storage, etc., then you have to make sure that the remote server allows your website to access its documents.
Otherwise, you will see the following issue in the browser Console:
Access to fetch at "REMOTE_SERVER" from origin "YOUR_SERVER" has been blocked by CORS policy.
where `REMOTE_SERVER` and `YOUR_SERVER` represent the domain of the remote and the current servers, respectively.
To fix that, you have to enable headers on the server response.
Enable CORS for Amazon S3 buckets
For more details, please follow the
instructions in the official S3 documentation. Basically, you have to set the headers below for the document:
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "POST"],
"AllowedOrigins": ["*"],
"ExposeHeaders": []
}
]
The `AllowedOrigins` contains the `*` wildcard meaning that you can access the document from any server. If you want to restrict access to defined domains only, then the setting might be changed to
[
"AllowedOrigins": [
"https://your-website.com"
]
]
Enabling CORS for Azure Storage
Add custom headers to the request
There are cases that viewing a document requires authorization. You will need to send custom headers to the server, so the server can recognize who is viewing the document.
To do that, you can use both the `withCredentials` and `httpHeaders` options. Here is an example of sending the an Authorization header to the server, where `xxxxxx` should be replaced with the token generated by your application logic:
<Viewer
fileUrl={...}
httpHeaders={{
'Authorization': 'Bearer xxxxxx',
}}
withCredentials={true}
/>