Theo's Typesafe Cult•2y ago

html `img` tag considered as not same origin?

I have this API that is 100% allowing the client to access it, and now I'm trying make it serve images to the client. so I setup everything and now I can visit the route (dedicated to static files serving) and browse to any file and get that file to show/download in my browser. the only problem is when I use the src attribute of an html img tag, I see this error in the browser: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 the url in the src is the same as the one I visit in the browser and the image loads successfully.

30 Replies

Ambushfall•2y ago

I'm not quite sure what this is about, and I could sound dumb quite frankly, however are you using Next/Image or just img tags? in my case, cross origin img src tags work normally, just the next/image elements don't allow until added to the Next.config

venego•2y ago

then I must be doing something wrong. or this brave-browser is doing something different. leme try other browsers nop blocked on chromium, chrome and brave the controller that handles the media:

const getFile = async (req, res) => {
    res.sendFile(req.params.file, {root: `./src/media/${req.params.section}`}, (err) => {
        if (err) {
            return console.log('file was not sent: ', err);
        }
        console.log('file was sent');
    });
};
module.exports = {getFile};

const getFile = async (req, res) => {
    res.sendFile(req.params.file, {root: `./src/media/${req.params.section}`}, (err) => {
        if (err) {
            return console.log('file was not sent: ', err);
        }
        console.log('file was sent');
    });
};
module.exports = {getFile};

maybe this is the wrong way to do it?

Ambushfall•2y ago

This is how I've made my image show, not sure if it's relevant to your query as you've provided server code for sending files

<img alt="discord image" src={sessionData?.user?.image?.toString()}/>

<img alt="discord image" src={sessionData?.user?.image?.toString()}/>

venego•2y ago

that's exactly how I do it. but it doesn't seem to work.

venego•2y ago

I found this solution (not happy with): https://stackoverflow.com/questions/50248329/fetch-image-from-api I handle the image as a blob and attach it to the src

Stack Overflow

Fetch image from API

Q1) In my reactjs application, I am trying to fetch an API from my backend Nodejs server. The API responds with an image file on request. I can access and see image file on http://192.168.22.124:3...

venego•2y ago

but it's kinda overkill

Ambushfall•2y ago

Perhaps the issue lies elsewhere, are you able to scaffold an example where I could try the code and see the difference?

venego•2y ago

ok the express route:

app.use('/media/:file', async (req, res) => {
    res.sendFile(req.params.file, {root: `./src/media`}, (err) => {
        if (err) {
            return console.log('file was not sent: ', err);
        }
        console.log('file was sent');
    });
});

app.use('/media/:file', async (req, res) => {
    res.sendFile(req.params.file, {root: `./src/media`}, (err) => {
        if (err) {
            return console.log('file was not sent: ', err);
        }
        console.log('file was sent');
    });
});

the client img:

<img alt='unexpected reponse!!' src='http://127.0.0.1:2000/media/venego.jpeg'></img>

<img alt='unexpected reponse!!' src='http://127.0.0.1:2000/media/venego.jpeg'></img>

Idk if this is enough though the way I'm able to get it to work: I get the img from the server using fetch

export const readBlob = (route) =>
    fetch('http://127.0.0.1:2000/' + route)
        .then(async (res) => {
            return URL.createObjectURL(await res.blob());
        })
        .catch((err) => err);

export const readBlob = (route) =>
    fetch('http://127.0.0.1:2000/' + route)
        .then(async (res) => {
            return URL.createObjectURL(await res.blob());
        })
        .catch((err) => err);

<img
    src=''
    onClick={(e) => {
        (async () => {
            const response = await readBlob('media/venego.jpeg');
            console.log(response);
            e.target.src = response;
        })();
    }}
></img>;

<img
    src=''
    onClick={(e) => {
        (async () => {
            const response = await readBlob('media/venego.jpeg');
            console.log(response);
            e.target.src = response;
        })();
    }}
></img>;

I think since the second way is able to get the img... the way img handles the response is the thing causes the problem and what I should understand. or maybe is the way I send the file from the server is different from what img expects?

venego•2y ago

@lukacolic finally found a solution. my google-fu is really bad, I have to practice this more often. https://stackoverflow.com/questions/69243166/err-blocked-by-response-notsameorigin-cors-policy-javascript

Stack Overflow

ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS Policy JavaScript

This is the image URL I got from an api https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_...

venego•2y ago

turns out img tag by default doesn't know about CORS

Ambushfall•2y ago

I see, can't say I've noticed any issues pulling up any img elements using t3. Happy that it's resolved.

venego•2y ago

interesting, I think I should try t3. thank you for your efforts

Ambushfall•2y ago

Op, sorry to bother you on such late notice, but take a look at this, might assist a tad bit https://discord.com/channels/966627436387266600/1044372514199052338 Cheers!

venego•2y ago

not bothering me at all. but it's kind of unrelated to my error. the actual problem was with the way img tag was designed by default. https://www.dofactory.com/html/img/crossorigin#:~:text=The%20crossorigin%20attribute%20on%20an,retrieve%20files%20from%20other%20domains. I need to explicitly tell it to be aware of CORS. using the crossorigin attribure. @lukacolic

Ambushfall•2y ago

It seems like you don't actually own the API, in which case my previous answer would make more sense, nevertheless it got fixed. This article from Mozilla pretty much sums up how HTTP Handles CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in ord...

Gaming

Programming

html `img` tag considered as not same origin?