(WAF Rules) Access to fetch at https://random.pages.dev has been blocked by CORS policy

General
1

Hi! I have an API in NodeJS and Express which I access from my frontend that I have in Cloudflare Pages, I already have CORS configured with: app.use(cors()); and it works fine.

The problem is that when I add my API to Cloudflare (Proxied) and configure WAF rules to only allow access to my API from the frontend in Cloudflare Pages, I get the following error in the console and it does not allow me to make my POST requests:

console-error

My API is on render.com

and I added the custom Domain with Clouflare, I must clarify that if I disable the blocking WAF rule, my API works perfect, so I assume it is misconfigured.

This is my WAF rule to block all requests except my frontend on Cloudflare Pages:
(I can’t add more images :frowning: please look at imgur)

https://imgur.com/C3EVLSB

And this is my rule that I want to Bypass if the URL matches and if it is done from my Cloudflare Pages domain:
Screenshot 1: https://imgur.com/ZsYf42l
Screenshot 2: https://imgur.com/JT3ucex

And finally this is the order in which I have the rules:
https://imgur.com/p9QrRkK

Do I need to add headers on my frontend requests now that I am using Cloudflare in my API or are the WAF rules misconfigured? Thanks in advance!

4

That firewall rule will block all requests regardless, that is saying the request hostname cannot equal anything other than pages.dev, the request hostname will be your zone, it will never be *.pages.dev

You can’t really do this in a foolproof way, every aspect of a request can be modified so someone could work around it.

5

I think I understand, but could you be more specific? Should I then use a custom domain in Clouflare Pages or should I modify something in the WAF rules? exactly what do you mean?
An apology, I’m quite confused

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.