Node-vibrant: Not working on cross origin

Created on 3 Sep 2019 · 9Comments · Source: Vibrant-Colors/node-vibrant

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

good first issue

Source

lucafaggianelli

👍1

Most helpful comment

Any updates regarding this?

jooohyunpark on 3 Sep 2020

👍4 ❤1

All 9 comments

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.

SmartASCII on 20 Sep 2019

👎2

@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

crutchcorn on 20 Sep 2019

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 notifications@github.com
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
https://github.com/akfish/node-vibrant/issues/101?email_source=notifications&email_token=ABCDSA4GJKDYSKYAUY6C5ADQKUL5TA5CNFSM4ITLGRV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7HSY5I#issuecomment-533671029,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABCDSAYXIIX65U3I25N256LQKUL5TANCNFSM4ITLGRVQ
.

lucafaggianelli on 20 Sep 2019

Same issue, working on a way to fix it!

Areskul on 17 Apr 2020

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.

Danistc on 5 May 2020

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.

SmartASCII on 5 May 2020

Any updates regarding this?

jooohyunpark on 3 Sep 2020

👍4 ❤1

anyone trying to fix this?

RohitKaushal7 on 25 Jan 2021

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?