同主机部署的React项目能否通过localhost:1337发起内部Axios请求？

你提出的方案完全可行，是部署前后端分离服务时限制API端口公网访问的标准实现方案。

你之前localhost调用报错的原因 #

你在前端Axios代码中写的localhost会被用户浏览器解析为用户本地设备的回环地址，而非你部署服务的远端主机回环地址，自然无法访问到仅在远端主机本地监听的1337端口服务，这是前端SPA运行逻辑的正常表现，不是配置错误。

具体实现步骤 #

• 第一步：先配置1337端口API服务的访问限制
  可以通过主机防火墙（如ufw/iptables）或者API服务自带的访问控制配置，仅允许127.0.0.1的请求访问1337端口，屏蔽所有公网IP对该端口的访问请求。
• 第二步：在React服务的Web服务层配置反向代理
  你部署React静态资源的Web服务（通常为Nginx、Apache，若使用SSR则为Node.js服务）需要新增反向代理规则，将指定前缀的前端API请求转发到本地1337端口的API服务。
  以Nginx为例，参考配置如下：

  server {
    listen 3000;
    # React静态资源托管原有配置
    root /usr/share/nginx/react-build;
    index index.html;
  
    # 新增API代理规则
    location /api/ {
      proxy_pass http://127.0.0.1:1337/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
  

• 第三步：修改前端Axios请求地址
  原有直接写公网IP的请求，改为相对路径即可，例如：
  调整前：axios.get("http://215.128.23.16:1337/collection/")
  调整后：axios.get("/api/collection/")

如果是本地开发阶段，使用Create React App搭建的项目可以直接在package.json中添加配置项"proxy": "http://localhost:1337"，即可实现开发环境的请求代理，和生产环境行为保持一致。

方案优势 #

• 完全满足你限制API服务仅本地访问的安全需求，1337端口无需对公网开放
• 避免跨域配置，无需额外处理CORS相关问题
• 后续API服务调整端口、迁移部署位置，仅需要修改反向代理配置，无需改动前端代码

内容的提问来源于stack exchange，提问作者Daniel N