Set up custom domain with CORS

[thiagopreischadt]

Hi there, I’m working on an app and I can’t seem to get cloudflare to work with it.

I’m running my frontend on an app engine service on a custom domain, let’s say it’s “https://frontend.mydomain.com”. Similarly, I’m running my backend on a cloud run service with a custom domain, they both have the same domain with different subdomains (consider the same as the frontend, but with backend instead) and HTTPS setup.

On my backend, I have these headers configured to be set:

“Access-Control-Allow-Credentials”: “true”
“Access-Control-Allow-Methods”: “GET, POST, PATCH, PUT, DELETE, OPTIONS”
“Access-Control-Allow-Headers”: “Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,observe”
“Access-Control-Allow-Origin”: “https://frontend.mydomain.com”

Everything works fine without cloudflare, but when I try to use it, I get blocked by CORS: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

What should I do to fix this?

[fritexvz]

@thiagopreischadt

“Access-Control-Allow-Origin”: “https://frontend.mydomain.com”

If using Google App Engine, App Engine supports CORS through the app.yaml file as mentioned here:

app.yaml Configuration File

Regarding this, n your .yaml file try adding:

http_headers:
    Access-Control-Allow-Origin: "*"

Afterwards, you can redeploy your App Engine to apply the configuration changes.

Could you please check if you can configure your CORS as written for a domain and sub-domains here?:

How to customize cors in Cloudflare

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. Do you have CORS HTTP header at your origin/host for desired domain and sub-domains? Are you doing GET or POST request? If using PHP: <?php header('Access-Control-Allow-Origin: *'); ?> If using Apache .htaccess: # for specific files <IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot…

[thiagopreischadt]

I have CORS configured in the origin (backend) to allow cors requests incoming from the frontend. I don’t want setup CORS with wildcard on the backend because I have other subdomains in the same domain and I don’t want to allow other applications to access that backend except for the specific one.

I will setup CORS on the App Engine Frontend as you mentioned and see if that works!

Thanks a lot

[michael]

@thiagopreischadt

I have CORS configured in the origin (backend) to allow cors requests incoming from the frontend.

Cloudflare uses the Origin request header as part of the cache key, so provided you make decisions on what CORS headers to add based only on data in the cache key, your solution will be fine.

You could also add the response headers in a Worker, there are examples on https://developers.Cloudflare.com

[thiagopreischadt]

Are custom cache keys only available for enterprise plans? What about the solution using workers, can that be done using the basic plan?