Comments (1)
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:
-
Origin: An origin is defined by the scheme (http, https), host (domain name), and port of a URL. For example,
https://example.com:80
andhttps://example.com:443
are different origins. -
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.
-
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.
-
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:
-
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.
-
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. -
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. -
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
from nextjs-notion-starter-kit.
Related Issues (20)
- All images fail to load!! 400: BAD_REQUEST HOT 3
- External Link Preview fails: google drive link HOT 1
- Error: Something went wrong installing the "sharp" module HOT 6
- to Lower Case error
- Continuous Build and Deployment Challenges in Next.js Notion Project
- Limit fetch to teamspace or rootNotionPageId children HOT 4
- Discourse as Comment System
- Is there any possible method that it can display 2 different gallery in blog page & the tag can be link
- How to add TOC in the mobile phone
- Multilingual per post instead of per site?
- Is it possible to generate OGP Image that the size lower than 1MB?
- 45 Minute
- Even non-existent pages return 200 OK http status code
- How to display the time create by "Date or reminder"?
- Bug: Publish date on website homepage is one month earlier than specified in Notion database, when it is set to be the first day of any month HOT 2
- After using Vervel to build, the Search function fails
- AWS Amplify has an error in deployment
- Fix Font size
- Configure site.config.ts with env variables
- [Question] Og image is empty when sharing url link
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nextjs-notion-starter-kit.