使用 React 从 nodejs 服务器获取图像

Question

我遇到了一个问题，我只能通过我的外部 ip 从 nodejs 检索图像文件

这是唯一可行的方法 src={`http://<outside ip>:5000/${<img>}`}

我已经尝试了这些变体来修复它：（为简单起见）

/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>   

我的问题是我必须将端口 5000 暴露给外界才能正常工作

我无法弄清楚为什么没有一个本地主机版本正在提取图像。虽然安全是一个问题，但速度似乎也受到了巨大的打击。

这是 nginx 的问题吗？一个Centos问题？不允许本地主机发送数据？还是我做错了？

TYIA

Answer 1

没有看到您的代码很难说，但这可能是CORS 问题？

如果您将 express 用于节点服务，那么您可以在此处查看如何轻松配置 CORS：https://expressjs.com/en/resources/middleware/cors.html

如果您使用 React 中的 fetch 来检索数据，您也可以尝试使用 "mode": "no-cors" 选项进行传递，如下所示：

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