Failed to load PDF file

[jesenator]

On the fruition site none of the PDFs load

When I go to the notion version of the public page the PDF loads fine

For reference:
https://jessegilbert.notion.site/Resume-a6574a6fca8f4edc8ff33e15c06d08f4
https://jessewgilbert.com/resume

My friend's fruition site has the same issue

[disachantel]

i'm having the same issue as well. anyone able to offer a fix here?

[nartb]

I'm also running into this same issue and would love to get a fix figured out. My PDF displays properly when I view the page within Notion but shows the OP's error message when accessing the public page.

[jesenator]

It must be some update in Notion that messes up how the cloudflare worker script handles the pdfs. But there isn't anything in the script that is specifically about PDFs, so I'm not sure how to diagnose it.

[jesenator]

Ok some progress. Upon consulting ChatGPT, it told me to check for console errors which there indeed were:
Access to fetch at 'https://file.notion.so/f/f/c084f242-38e2-4a3b-9667-27a3b133dc26/d3c329f1-9a86-4a70-a075-8aa440fd2e3b/Thermal_Analysis_of_Airflow_Over_a_Bike_Disc_Brake.pdf?id=fd796927-8cff-45ae-8c2e-72c583db0e32&table=block&spaceId=c084f242-38e2-4a3b-9667-27a3b133dc26&expirationTimestamp=1703224800000&signature=Ur-GRfBQkFI2WT40fKMqVBHqk4SceTrU34D5jBUlCMg' from origin 'https://jessewgilbert.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. 51-3783436a3f5768d6.js:1

GET https://file.notion.so/f/f/c084f242-38e2-4a3b-9667-27a3b133dc26/d3c329f1-9a86-4a70-a075-8aa440fd2e3b/Thermal_Analysis_of_Airflow_Over_a_Bike_Disc_Brake.pdf?id=fd796927-8cff-45ae-8c2e-72c583db0e32&table=block&spaceId=c084f242-38e2-4a3b-9667-27a3b133dc26&expirationTimestamp=1703224800000&signature=Ur-GRfBQkFI2WT40fKMqVBHqk4SceTrU34D5jBUlCMg net::ERR_FAILED 200 (OK)

Its response
The CORS (Cross-Origin Resource Sharing) error you're seeing indicates that the browser is blocking the request to fetch the PDF file because the response from the server doesn't include the correct CORS headers. This is a common security feature in web browsers to prevent malicious websites from accessing data they shouldn't.

The error message:

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
suggests that the server is responding with Access-Control-Allow-Origin: , which means that it allows any domain to fetch its resources. However, when credentials are included (e.g., cookies, HTTP authentication, and client-side SSL certificates), the wildcard '' is not accepted for security reasons, and the server must specify the exact origin or origins that are allowed.

Here's how you can address this:

1. Modify the Server's CORS Policy: The server at file.notion.so that serves the PDF needs to respond with a header that matches the origin making the request, or a list of origins allowed to access the resource, instead of the wildcard '*'. This is something that would typically need to be configured on the server side by Notion or whoever controls the file.notion.so domain.

2. Remove the Credentials: If the fetch request is being made with credentials (this might be the default if you're making the request from a script within a page that's served with credentials), try modifying the request to not include credentials. You can do this by setting the credentials option to 'omit' in the fetch request:

fetch(url, {
  method: 'GET', // or 'PUT'
  mode: 'cors', // no-cors, *cors, same-origin
  credentials: 'omit', // include, *same-origin, omit
  ...
});

3. Proxy the Request: If you don't control the server and can't change the CORS policy, another solution is to proxy the request through a server that you do control. This proxy server would make the request to file.notion.so server-side, receive the response, and then add the appropriate Access-Control-Allow-Origin header before sending it back to the client-side code.

I've been trying to get ChatGPT to write something that works (as I have no experience with javascript or web programming like this) but no luck so far

[jesenator]

The google drive pdf embed you have Nart is a great idea. I had just been having a screenshot of my resume but that is much better 😆

[nartb]

Yeah I managed to figure out that it was a CORS issue. As the PDF embed was working before, I think Notion must've changed their CORS policy to not allow a domain other than notion.so to show PDFs uploaded to Notion. The only thing I could think of was just hosting the PDF elsewhere (in my case, Google Drive) and embedding the link instead of uploading to Notion. Not sure that there's any way for Fruition to fix this.

Hope that helps @jesenator!

[bravohenry]

Same problem here

[mscherif]

Hello, I have the same problem with pdfs and even using Google Drive.
Here below the exceptions:
POST https://http-inputs-notion.splunkcloud.com/services/collector/raw net::ERR_BLOCKED_BY_CLIENT

51-3783436a3f5768d6.js:1 Failed to connect to splunk server TypeError: Failed to fetch
at t (51-3783436a3f5768d6.js:1:32165)
at o.push (app-246ac002467cd2f2.js:1:325784)
at b (app-246ac002467cd2f2.js:1:327279)
at Module.h (app-246ac002467cd2f2.js:1:326647)
at Object.errorCallback (2459-b670e9651ceda7f8.js:72:357993)
at rt._logErrorsOnEvents (transport-support-b30a1d42e0d68210.js:1:68337)
at transport-support-b30a1d42e0d68210.js:1:69612
at n.onreadystatechange (transport-support-b30a1d42e0d68210.js:1:29813)
at XMLHttpRequest.s (51-3783436a3f5768d6.js:1:51584)

The same with Brave and Edge. Is there a workaround to solve the problem ?