I am dealing with a very random CORS issue. It seems to only happen on Safari. And sometimes the error dissapears randomly - without me doing any changes on server. I get the following error:
Origin https://example.com is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load https://app.example.com/wp-json/jwr/v1/post/some-page?lang=en&base=http:%2F%2Fexample.com due to access control checks.
If I choose to copy the request as a CURL to inspect the response headers, I get the access-control-allow-origin with the correct origin (https://example.com) - even the allowed cors headers set. This is my cURL:
curl -I 'https://app.example.com/wp-json/jwr/v1/post/some-page?lang=en&base=http:%2F%2Fexample.com' \
-XGET \
-H 'Accept: application/json, text/plain, */*' \
-H 'Origin: https://example.com' \
-H 'Referer: https://example.com/product/iii-2' \
-H 'User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Mobile/15E148 Safari/604.1'
And the response is:
HTTP/2 200
date: Sun, 31 May 2020 12:23:08 GMT
content-type: application/json; charset=UTF-8
content-length: 45
set-cookie: __cfduid=d6a204fcbe29745154f0a50e4d8700bde1590927787; expires=Tue, 30-Jun-20 12:23:07 GMT; path=/; domain=.example.com; HttpOnly; SameSite=Lax; Secure
x-powered-by: PHP/7.3.18
x-robots-tag: noindex
link: <https://example.com/wp-json/>; rel="https://api.w.org/"
x-content-type-options: nosniff
access-control-expose-headers: X-WP-Total, X-WP-TotalPages
allow: GET
access-control-allow-origin: https://example.com
access-control-allow-methods: POST, GET, OPTIONS, DELETE
access-control-allow-credentials: true
access-control-allow-headers: Accept, Accept-Encoding, Accept-Language, Authorization, Cache-Control, Pragma, Content-Type, Origin, Referer, Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, User-Agent
vary: Origin,User-Agent
x-litespeed-cache-control: no-cache
alt-svc: h3-27=":443"; ma=86400
cache-control: max-age=691200
cf-cache-status: MISS
cf-request-id: 030c489e8d0000d87990a6a200000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 59c0aa10ef1dd879-CPH
As you can see all of the CORS headers are there, and seemingly correct.
What am I missing here?
You can try yourself:
curl -I 'https://app.thejewelleryroom.com/wp-json/jwr/v1/products/small-ice-cream-necklace?cacheKey=1&lang=en&base=https:%2F%2Fthejewelleryroom.com' \
-XGET \
-H 'Accept: application/json, text/plain, */*' \
-H 'Origin: https://thejewelleryroom.com' \
-H 'Referer: https://thejewelleryroom.com/' \
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15'