I’m hosting a React app on Cloudflare pages which connects to an API hosted at a different domain. I’ve been running into CORS issues that I haven’t been able to solve.
I have no issues when I use the app on the Cloudflare provided domain. But when set another domain for the page, on Cloudflare console and use it through that, it stops working. I’ve found out that the response headers in the preflight request is different for the two cases:
Response headers for the Cloudflare provided domain:
access-control-allow-credentials: true access-control-allow-headers: content-type access-control-allow-methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT access-control-allow-origin: https://rw-frontend.pages.dev allow: POST, OPTIONS cache-control: private cf-cache-status: DYNAMIC cf-ray: 66261653dee0d45b-HAM cf-request-id: 0acbac486a0000d45b180e8000000001 content-encoding: gzip content-type: text/html; charset=utf-8 date: Sun, 20 Jun 2021 15:38:58 GMT expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" server: cloudflare vary: Origin
Response headers to my request through the added domain app.repetition.works
access-control-allow-origin: https://app.repetition.works cache-control: private cf-cache-status: DYNAMIC cf-ray: 66262def8c2b1e65-MUC cf-request-id: 0acbbb09b400001e65b838e000000001 content-length: 0 date: Sun, 20 Jun 2021 15:55:05 GMT expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" server: cloudflare
Note that I’m not the proxy option is off for my domain. I’m guessing this is not due to my server configuration and somehow due to Cloudflare, because my server returns the correct headers for the cross origin request from the Cloudflare provided domain.
Or did I misunderstand this? Does this sound familiar to anyone?