[SOLVED] Using Notion API in Nginx http server through reverse proxy returns 403 Forbidden error by Cloudflare

Using Notion API in Nginx http server through reverse proxy returns 403 Forbidden error by Cloudflare

we are trying to use Notion API in our web application. In development, we are using vite proxy and we are using Nginx for the production to access Notion API in the frontend.

Our vite proxy config as follow works well in our development process:

'/api/notion/database': {
    target: `https://api.notion.com/v1/databases/${process.env.VITE_NOTION_DATABASE_ID}`,
    changeOrigin: true,
    rewrite: (path: string) =>
        path.replace(/^\/api\/notion\/database/, '') as string,
    headers: {
        Authorization: `Bearer ${process.env.VITE_NOTION_API_KEY}`,
        'Notion-Version': '2022-06-28',
        'Content-Type': 'application/json',
    },
},

However, when we use Nginx, it returns the 403 Forbidden error or 421 as follows:

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->

<html>
<head><title>421 Misdirected Request</title></head>
<body>
<center><h1>421 Misdirected Request</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->

Because the error message contains Cloudflare, it seems that the error is from Cloudflare rather than Notion. When I tried to find solution, I just found that it is related to WAF and SSL issue. We are using HTTP in Nginx because we apply SSL certificate to our web application through external application load balancer rather than Nginx itself.

We added the proxy_ssl_server_name on and proxy_ssl_name $proxy_host as some internet sources, but it still does not solve the problem.

Here is the part of our Nginx config and do you have any clue to solve this issue?

location /api/notion/database {
    proxy_ssl_server_name on;
    proxy_ssl_name $proxy_host;

    rewrite ^/api/notion/database(.*)$ /v1/databases/NOTION_DATABASE_ID$1?$args break;

    proxy_pass https://api.notion.com;

    proxy_set_header   Authorization "Bearer NOTION_API_KEY";
    proxy_set_header   Notion-Version "2022-06-28";
    proxy_set_header   Content-Type "application/json";

    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Host $host;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-Proto $scheme;
}

Solution

Okay, I just found the solution by myself. I share this solution with others.

The issue was not about Notion or Cloudflare. It was much more close to path rewrite issue. The main key is just adding "/" in rewrite and REMOVE proxy_set_header Host $host;

location /api/notion/database {
    proxy_ssl_server_name on;
    proxy_ssl_name $proxy_host;

    rewrite ^/api/notion/database/(.*)$ /v1/databases/NOTION_DATABASE_ID/$1 break;

    proxy_pass https://api.notion.com;

    proxy_set_header Authorization "Bearer NOTION_API_KEY";
    proxy_set_header Notion-Version "2022-06-28";
    proxy_set_header Content-Type "application/json";
    proxy_http_version 1.1;
}