node.js - Getting images from nodejs server with React

Question

Im having an issue where i can only retrieve image files from nodejs through my outside ip

This is the only way that works src={`http://<outside ip>:5000/${<img>}`}

I have tried these variations to fix it: (abbreviated for simplicity)

/api/<img>    (the /api/ route is used by nginx to route to nodejs)
localhost:5000/<img>
http://localhost:5000/<img>
http://localhost:5000/api/<img>
http://0.0.0.0:5000/<img>
http://0.0.0.0:5000/api/<img>
http://127.0.0.1:5000/<img>
http://127.0.0.1:5000/api/<img>
http://api/<img>   

My problem is that i have to expose port 5000 to the outside world for this to work

I cant figure out why none of the localhost versions are pulling images. Although security is a concern, it seems that speed has taken a massive hit as well.

Is This an nginx problem? A Centos problem? not allowing localhost to send data? Or am i just doing this wrong?

TYIA

question from:https://stackoverflow.com/questions/65598389/getting-images-from-nodejs-server-with-react

Answer 1

Hard to say without seeing your code, but it could be a CORS issue?

If you're using express for the node service then you can see how to easily configure CORS here: https://expressjs.com/en/resources/middleware/cors.html

If you're using fetch from React to retrieve the data, you can also try passing using the "mode": "no-cors" option like so:

fetch('http://localhost:5000/api/<img>', {
  method: 'GET',
  mode: 'no-cors', 
}).then(result => {
  // Do whatever you need to do 
}).catch(err => {
  // Handle error
})