Using no-cors mode for Image texture

Get Help
1

Whenever I want to render an image, I keep getting CORS related errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ...jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

I set the ‘src’ property like this:

this.Image.patch({ src: image.url });

When using the Fetch API with mode set to ‘no-cors’, I’m able to fetch the image:

fetch(image.url, { mode: "no-cors" })...

Is there a way to set a CORS property on the Image texture?

2

Hi!

You’ll need the image server to respond with the following header:

Access-Control-Allow-Origin "*"

For workaround you could try setting useImageWorkers=false - that should use the normal img tag and load the images.

3

Thanks for the feedback!

In my case, the server doesn’t send the:

header, but instead it uses the Set-Cookie HTTP response header.

AFAIK, the HTMLImageElement in a regular HTML/JavaScript application automatically sends the cookie HTTP request header (and possibly no-cors mode) when setting the src property.

For example, this is what I see in the developer tools:

:authority: [redacted]
:method: GET
:path: [redacted].jpg
:scheme: https
accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
accept-encoding: gzip, deflate, br
accept-language: nl-NL,nl;q=0.9,en-US;q=0.8,en;q=0.7,de;q=0.6
cache-control: no-cache
cookie: [redacted]
pragma: no-cache
referer: [redacted]
sec-ch-ua: "Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
4

Yes - normal img tag allows cross domain loading. However, using a service worker and cross domain requires the CORS header.

Do you have access to the image server to add the header? Can you request it be added? Alternatively you can add a proxy layer.

5

Ah, right. Then this differs from the img tag behaviour, good to know.

With this knowledge, I can ask to add the header/feature to the image server.

Thanks for the info

6

For future reference, just using an image as a WebGL texture requires same-origin or the CORS header. So the worker does not add additional restrictions.

1 Like