Not working on cross origin

[lucafaggianelli]

I'm using vibrant in the browser and the images are on a different server than the one serving my app, actually they're Google Places photos. I tried in both loading a string or an but I always got a Cross-Origin error. My browser is Firefox.

I think cross origin images is a common scenario, how do you make it work?

Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at
https://maps.googleapis.com/maps/api/place/js/PhotoService.G...
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Luca

[SmartASCII]

Using cors-anywhere worked for me. All you have to do is prepend the cors-anywhere URL to the URL of your image.

vibrantUrl= "https://cors-anywhere.herokuapp.com/" + imageUrl;

Then use that to pass to the Vibrant builder. Note that you can't use this cors URL if you're just trying to load it into an img src or background-image, etc -- you'll need to use the direct URL for that still.

[crutchcorn]

@SmartASCII while this might work for some instances, hammering cors-anywhere for larger scale projects would not be ideal (nor would leaking data that way). I'd suggest allowing the headers for any Vibrant request to be able to be modified added as a feature to node-vibrant

[lucafaggianelli]

Yes the proxy could work, but as a temporary workaround, I wouldn't use it in production. At the end I'm uploading pics to my server and issue is solved

…

On Fri, Sep 20, 2019, 20:54 Corbin Crutchley ***@***.***> wrote: @SmartASCII <https://github.com/SmartASCII> while this might work for some instances, hammering cors-anywhere for larger scale projects would not be ideal (nor would leaking data that way). I'd suggest allowing the headers for any Vibrant request to be able to be modified added as a feature to node-vibrant — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#101>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABCDSAYXIIX65U3I25N256LQKUL5TANCNFSM4ITLGRVQ> .

[Areskul]

Same issue, working on a way to fix it!

[dsanchez07]

Any idea on how to fix it? I'm using react-palette with images in S3 and from time to time I receive the CORS error.

[SmartASCII]

I used CORS-anywhere to ensure a solution like that would work and then rolled my own CORS proxy solution into my Node project so I could redirect locally -- been working fine for months now.

[jooohyunpark]

Any updates regarding this?

[RohitKaushal7]

anyone trying to fix this?

[Basher7]

Using cors-anywhere worked for me. All you have to do is prepend the cors-anywhere URL to the URL of your image.

vibrantUrl= "https://cors-anywhere.herokuapp.com/" + imageUrl;

Then use that to pass to the Vibrant builder. Note that you can't use this cors URL if you're just trying to load it into an img src or background-image, etc -- you'll need to use the direct URL for that still.

adding cors-anywhere not working in my angular 10 project. node-vibrant unable to load images from server due to cors-policy.
anyone have any better solution for this problem?

[yethranayeh]

Using cors-anywhere worked for me. All you have to do is prepend the cors-anywhere URL to the URL of your image.

vibrantUrl= "https://cors-anywhere.herokuapp.com/" + imageUrl;

Then use that to pass to the Vibrant builder. Note that you can't use this cors URL if you're just trying to load it into an img src or background-image, etc -- you'll need to use the direct URL for that still.

This helped me with my APOD API project.

Providing URL from the fetch response works when I use it on src attribute of the <img> tag, but using the same URL for vibrant results in a CORS error.

Simply prepending the link with "https://cors-anywhere.herokuapp.com/" helped solve my issue. Thanks!

[micahlt]

What's odd is that it seems that there is code to handle this, but it just isn't working right:

node-vibrant/src/image/browser.ts

Lines 49 to 51 in 8843d00

	if (!isRelativeUrl(image) && !isSameOrigin(window.location.href, image)) {
	img.crossOrigin = 'anonymous'
	}

[vicvillalobos]

Cors-anywhere no longer provides this functionality in a permanent fashion, and it was never meant to be used in production builds anyway.

[Tararan]

Does anyone have a solution to this issue?
I am currently fetching data from NYT (getting books) and their books are hosted on storage.googleapis.com.

And I'm getting CORS error whenever I try using Vibrant to get colors from images.

If you have any ideas except for using cors-anywhere I'm listening

[mploux]

I found a workaround, you can directly pass an Image to vibrant, and set crossOrigin to anonymous:

    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = url; // + '?not-from-cache-please';

    const v = new Vibrant(img, opts);

You can add not-from-cache-please to ignore the cache and make it work directly, but don't forget to remove it later

[deggertsen]

I found a workaround, you can directly pass an Image to vibrant, and set crossOrigin to anonymous

We're doing this, but unfortunately that's not solving the problem for us either. Still looking for a solution and will report back if I find one.

Edit: Finally got it to work. It was indeed an image caching issue. And a frustrating one at that. I tried adding "?not-from-cache-please" to the end of my image urls and my code was not updating and I didn't realize it. Once I finally got it to update, adding that to the end of my images fixed the issue.

[twofingerrightclick]

This is not a Node-Vibrant issue, its default browser security policy:

Even if your server doesn't include the necessary CORS headers, modern web browsers enforce the same-origin policy by default to protect users' security. This policy restricts cross-origin requests initiated by client-side JavaScript for security reasons.

When the browser receives a response without the required 'Access-Control-Allow-Origin' header, it considers the request to be violating the same-origin policy. As a result, the browser blocks the request and throws a CORS error to prevent potential cross-site scripting (XSS) attacks or unauthorized access to sensitive data.

In other words, even if your server doesn't explicitly restrict cross-origin access, the browser still enforces the same-origin policy unless the appropriate CORS headers are present in the server's response.

To resolve the issue, you must include the necessary CORS headers on the server-side to explicitly allow cross-origin requests. Without those headers, the browser will continue to block the requests due to the default same-origin policy.

How to Make it Work

Case: Photo src is not in your control
If you cant configure your photo delivery service (like if you don't own it i.e. unsplash.com) you have to proxy your photo requests. Please comment if you know other good work arounds.
Case: You have control
If you control your storage service, you need to set the Access-Control-Allow-Origin header to the same origin as your app in your storage service. Now your server will respond with an Access-Control-Allow-Origin header, that tells your browser it is OK that Node-Vibrant is making a request for that resource, as it passes the default same-origin policy.

Example
I was using Azure Blob Storage and added my localhost that I am using for dev, as well as the production origin: