Heroku部署Django React应用时axios报ERR_CONNECTION_REFUSED错误

这个连接拒绝报错和CORS、ALLOWED_HOSTS配置没有关系。核心问题是前端代码里的axios请求地址硬编码写死了本地开发用的http://127.0.0.1:8000，部署到线上后，访问站点的浏览器会尝试向访问者自己设备本地的8000端口发请求——普通用户本地根本没有运行你的Django后端服务，请求根本发不到线上服务器，自然直接报连接拒绝。
另外你初始写的ALLOWED_HOSTS配置本身格式也有问题：Django的这个配置项不需要加https://这类协议前缀，只需要填写域名/IP本身即可，但这不是触发本次报错的原因。

• 去掉前端代码里硬编码的本地后端地址。如果是前后端同域部署（即前后端代码部署在同一个Heroku服务下，通过同域名的不同路径区分前后端路由），直接把接口请求改成相对路径即可，比如把原请求地址http://127.0.0.1:8000/api/questions/改为/api/questions/，浏览器会自动匹配当前访问站点的协议、域名发起请求，本地开发和线上部署都可以通用，不需要额外改地址。
• 如果是前后端分开部署在不同域名下，不要把请求地址硬编码在代码里，通过环境变量区分不同运行环境：本地开发环境将接口基地址环境变量设为本地后端地址，线上Heroku环境将对应环境变量设为线上后端的正式域名，axios启动时读取对应环境变量作为请求基地址即可。
• 修正settings.py中的ALLOWED_HOSTS配置，去掉所有条目前面的协议前缀，参考正确写法：

ALLOWED_HOSTS = [
    'friendly-interview-duck.herokuapp.com',
    '127.0.0.1',
    'localhost'
]

不需要开启CORS_ORIGIN_ALLOW_ALL = True这种全放开跨域的不安全配置，如果是同域部署，甚至不需要额外配置CORS规则，因为请求源和接口源同属一个域名，不存在跨域限制。

• 所有配置修改完成后，重新提交代码部署到线上，清空浏览器缓存或者用无痕窗口访问验证即可。

补充说明：修改CORS和ALLOWED_HOSTS配置无效的原因很简单：这两个配置都是请求成功到达Django服务之后，服务端才会执行的校验规则。本次报错里的请求根本没发到线上Django服务，在用户本地尝试连接端口时就失败了，修改服务端配置自然不会产生任何效果。

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