Header set Access-Control-Allow-Origin

Problems with CORS

[jetteroheller]

I noticed some days ago a degeneration of panoama photos on my site my-example-com.
The Pannellum javascript was at other-example.com

I added into the .htacces from my-example.com
Header set Access-Control-Allow-Origin "https://other-example.com/"

Now I have a similar problem: a javascript loaded from a page on my-example.com wants to load https://other-example.com/pic/a-picture.jpg
by the jsPDF function

pdf.addImage(https://other-example.com/pic/a-picture.jpg, 'jpg',20,20,40,40)

but
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any idea, why
Header set Access-Control-Allow-Origin "https://other-example.com/"
worked in one case but not in the other case?

[edited by: not2easy at 4:57 am (utc) on Jan 22, 2023]
[edit reason] de-linked for readability [/edit]

[phranque]

but
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

have you checked the request/response headers for that resource for any clues?

not necessarily the problem, but:
did the page response include a Vary: Origin header?
is an Origin: request header sent for the jpg resource?

have you tried specifying a wildcard for the Access-Control-Allow-Origin header?

[jetteroheller]

I just discovered a wrong “It works”. Both what mentioned above does not work.

There is a page on my-example.com
This page loads a js from my-example.com
This js loads jspdf.umd.js from my-example.com
This js tries pdf.addImage(https://other-example.com/pic/a-picture.jpg, 'jpg',20,20,40,40)

jspdf.umd.js:15700 Access to XMLHttpRequest at 'https://other-example.com.....' from origin 'https://my-example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr @ jspdf.umd.js:15700
jspdf.umd.js:15700 Failed to load resource: net::ERR_FAILED
xhr @ jspdf.umd.js:15700

I added into the .htacces from my-example.com
Header set Access-Control-Allow-Origin "https://other-example.com/"

[phranque]

in any case, have you checked the request/response headers for the resource(s) in question?
perhaps the Access-Control-Allow-Origin header isn't being sent.

[jetteroheller]

Changed
Header set Access-Control-Allow-Origin "https://other-example.com/"
to
Header set Access-Control-Allow-Origin "other-example.com"
and now it works.

[lucy24]

and now it works.

That’s really unnerving, because if you look it up on sites that would seem to know what they’re doing (mozilla dot org, that kind of thing) their examples consistently include the protocol.

[phranque]

Changed
Header set Access-Control-Allow-Origin "https://other-example.com/"
to
Header set Access-Control-Allow-Origin "other-example.com"
and now it works.

the problem isn't the schema specification, it's the trailing slash.
you should try this:

Header set Access-Control-Allow-Origin "https://other-example.com"

if you look at the specification of the CORS protocol in the Fetch Standard, you will find the slightest hint here where "illegal combinations" are exemplified:
https://fetch.spec.whatwg.org/#cors-protocol-and-credentials

A serialized origin has no trailing slash.

the concept of "serialization of an origin" is described here:
https://html.spec.whatwg.org/multipage/browsers.html#ascii-serialisation-of-an-origin

[jetteroheller]

Very strange. I tested 2 different examples. Both worked.
I just tested something on different browsers. Worked not.
Again with Chrome, does not work.

[jetteroheller]

Restarted my notebook after sound system did not work. Now the panoramas work again.

[phranque]

does the page response include a Vary: Origin header?
this may be helpful in making the browser caching of these resources work properly.
in any case, be sure to try clearing your cache whenever testing things such as this.

[jetteroheller]

I installed HTTP header live on Firefox

https://my-example.com/faq/some.htm
Host: my-example.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://other-example.com/
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: cross-site
Sec-Fetch-User: ?1

GET: HTTP/2.0 200 OK
last-modified: Fri, 27 Jan 2023 23:50:30 GMT
etag: "e72-5f34787cb11bc"
accept-ranges: bytes
content-length: 3698
vary: User-Agent,Accept-Encoding
access-control-allow-origin: other-example.com
cache-control: max-age=172800
pragma: cache
content-type: text/html
content-encoding: gzip
date: Sun, 29 Jan 2023 00:28:58 GMT
server: Apache
X-Firefox-Spdy: h2

[edited by: not2easy at 1:34 pm (utc) on Jan 29, 2023]
[edit reason] readability [/edit]