AngularJS 1.3.x部署Heroku遇端口动态变化 如何动态获取端口？

常见误区：Heroku 分配给Node.js服务的process.env.PORT是内部反向代理使用的端口，用户浏览器访问你的应用时实际用的是默认的80/443端口，不会暴露内部端口。AngularJS作为客户端运行框架，本身无法直接读取服务端的process.env环境变量，可通过以下方案实现需求：

方案1：使用相对路径（最推荐） #

绝大多数场景下不需要显式声明端口号，所有接口、静态资源请求直接使用相对路径即可，浏览器会自动拼接当前页面的协议、域名、端口，无需额外适配Heroku的动态端口规则。
示例：

// 原写法（硬编码端口会失效）
$http.get('http://yourdomain.com:3000/api/list')

// 改为相对路径写法
$http.get('/api/list')

方案2：前端直接读取浏览器端口 #

无需修改服务端代码，直接通过浏览器原生window.location对象读取当前访问端口，默认80/443端口场景下可加兜底判断：

// 封装为AngularJS全局服务
angular.module('yourApp').factory('GlobalConfig', function() {
  return {
    PORT: window.location.port || (window.location.protocol === 'https:' ? '443' : '80')
  }
})

// 业务代码中调用
angular.module('yourApp').controller('YourController', function(GlobalConfig) {
  console.log('当前访问端口：', GlobalConfig.PORT)
})

方案3：服务端注入端口到前端 #

如果你确实需要在前端获取到Heroku分配给Node.js服务的内部端口，可通过服务端模板渲染的方式注入到入口HTML中：

1. Node.js服务端（以Express为例）代码：

const express = require('express')
const app = express()
const PORT = process.env.PORT || 3000

// 配置模板引擎，渲染index.html
app.get('/', (req, res) => {
  res.render('index.html', {
    serverPort: PORT
  })
})

app.listen(PORT)

2. 入口index.html中插入全局配置：

<script>
  window.SERVER_CONFIG = {
    PORT: '<%= serverPort %>'
  }
</script>

3. AngularJS代码中直接读取全局变量即可：

const serverPort = window.SERVER_CONFIG.PORT

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