CORS issue for Embedded PDFs

[addison-codes]

Description

Embedded PDFs are not showing and display 'Failed to load PDF file'. In the console I get this message:

Access to fetch at 'https://file.notion.so/f/s/15cea71f-e35f-4dfd-900d-ae9ee3f5db7e/NPS_Quick_Reference_Guide.pdf?id=9e054fc7-17a7-41e3-9654-7128028c1612&table=block&spaceId=2443bf74-e5e7-4322-affd-43349a347480&expirationTimestamp=1689897600000&signature=8YGAT-os8tV8TY_A9pIF6pldG-Yru0c92fFtVYAgRHQ' from origin 'https://subdomain.mysite.com' 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.

Can anyone recommend an easy fix?

[datfoosteve]

CORS stands for "Cross-Origin Resource Sharing". It's a security feature implemented by web browsers to prevent potentially malicious actions coming from web pages that are not from the same origin as the main website.

Here's a quick breakdown:

1. Origin: An origin is defined by the scheme (http, https), host (domain name), and port of a URL. For example, https://example.com:80 and https://example.com:443 are different origins.

2. Same-origin policy: For security reasons, web browsers restrict web pages from making requests to a different domain than the one that served the web page. This is called the same-origin policy.

3. Cross-origin requests: Sometimes, you want to intentionally make requests to another domain (cross-origin requests). Browsers allow this, but they place restrictions to ensure security. CORS is a mechanism that defines how these cross-origin requests are handled and when they're permitted.

4. Headers: The server can send headers that tell the browser it's okay to display content or run scripts that make requests to this server, even if the original website comes from a different origin. The main header used for this is the Access-Control-Allow-Origin header.

In the problem you described, the PDF hosted on Notion is not allowing your website (running on a subdomain) to fetch and display it due to CORS restrictions. The server (Notion in this case) needs to send a header saying that your site is allowed to access this resource. Without that, the browser blocks the request to protect the user.

To fix this, you have a few options:

1. Server-side Proxy: Create a backend route on your server that fetches the PDF and then serves it to your frontend. This way, the request from your frontend is to your own server (same origin) and not directly to Notion.

2. Setting no-cors: As suggested by the error message, you can set the fetch request mode to 'no-cors'. This will get an "opaque" response. You won't be able to read the data from JavaScript, but for displaying a PDF, it might be enough. This isn't the most elegant solution and doesn't work in all cases.

3. Contact the resource host: If you have control or communication with the Notion team, you can request them to add your domain to their Access-Control-Allow-Origin header. This is not always feasible, especially with larger platforms.

4. CORS plugins: There are browser plugins that can disable CORS for development purposes, but this is NOT a production solution and can pose security risks.

It's important to note that CORS is a client-side restriction. It doesn't actually secure the resource but rather prevents potentially harmful client-side actions. Actual security must be implemented server-side.

Ps: I chat gpted this question