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: rw-frontend.pages.dev
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?