: Can I permit access to sub-domain from the main domain using the domain name rather than IP address? Stepping into React I want to utilize WordPress's REST API to feed a React site and plan

Stepping into React I want to utilize WordPress's REST API to feed a React site and plan to host the WordPress site on a subdomain like foo.bar.com and bar.com would be the hosted React portion.

I'd like to prevent anyone hitting the subdomain foo.bar.com except for the domain bar.com to have access. I'm curious if this can be done with the domain instead of the IP to prevent any issues with systems such as cloudflare. I'm familiar with using .htaccess to only allow an IP into certain folders in a domain but not a subdomain. When I research to see if this has been asked:

Only allow access to /directory from a specific domain?
Only allow access to /admin from a specific domain?
Access Website by domain name only (not IP address)
configure only allow specific domains to access certain folders using .htaccess

I'm not able to find a definitive solution or implementation. Is there a way in .htaccess to deny all except from the domain and when someone that isn't the domain make a redirect to foo.bar.com/404? I've redirected from a sub domain to the domain before with:

RewriteCond %{HTTP_HOST} !^example.com$ [NC]
RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]
RewriteRule . "http://www.example.com/" [R=301,L]

but on the subdomain how can I indicate access for the domain?

Edit:

Apologies for the confusion. My goal is to prevent others except the main domain from accessing the API hosted at the sub-domain and since everything in React can be accessed. I've done redirects but never only allowed a domain and redirected others. I don't think an IP solution would be ideal if the initial main domain is also hosted at Cloudflare because that IP routinely changes I recall.