Chrome dev tool error- Status in network tab is CORS ERROR while fetching image from Alibaba OSS

Question

fetch(url).then((response) => {
        return response.blob();
    }).then(blob => {
        return URL.createObjectURL(blob);
    });

My url in fetch() actually a image url of different domain which is OSS_URL of Alibaba Cloud. How can i have full access over it.

Answer 1

you should config CORS on your Alibaba cloud. check their docs like here

Answer 2

The URL you're fetching in this snippet fetch(url) Is blocking your request because that url isn't accepting requests for its resources unless its from a trusted source.

You need to Add CORS policy's to your server which will tell the server the URL you're requesting from is safe.

Your url (localhost) -> request to server -> Server declines (localhost)

This is creating the CORS error because the Server your requesting from doesn't allow resource sharing between untrusted sites.