React生产构建环境URL配置及DigitalOcean部署问题咨询

为什么localhost和127.0.0.1访问会触发跨域 #

浏览器同源策略校验的是完整源三元组：协议+域名/主机+端口，三者完全一致才算同源，哪怕两个主机名指向同一个服务器IP，只要字符串不匹配就会判定为跨域。

• http://localhost:8000 和 http://127.0.0.1:8000 的host字段不相等，属于不同源，自然会触发跨域拦截
• 你判断的「React构建后生产域名配置会被固定，无法动态变更」是对的：React是客户端单页应用，构建时会把所有写死的环境变量、配置项直接编译打包到静态JS文件里，构建完成后除非重新打包，否则配置不会变
• 如果你用django-cors-headers处理跨域，CORS_ALLOWED_ORIGINS列表必须把所有实际用来访问前端的源都加进去，少一个都会报跨域错
• 顺带提一句：你贴的示例代码里环境变量名拼写错误，enviroment少了一个n，正确拼写是environment，本地运行没出问题大概率是你实际业务代码里写的是正确拼写，注意排查即可。

生产环境后端URL正确写法 #

你部署完SSL证书走HTTPS对外服务的话，必须填写带HTTPS协议的完整域名，也就是https://your-domain.com，其他写法的问题如下：

• 不要写纯域名（比如domain-name.com）：没有协议前缀时浏览器会自动用当前前端页面的协议补全，后续配置HTTP强制跳HTTPS时，很容易出现混合内容拦截问题
• 不要写裸服务器IP：首先公网IP无法申请普通DV SSL证书，走HTTPS访问会报证书不安全错误；其次后续换服务器、迁移机房、配置CDN时只要IP变了，前端就得重新打包改配置，维护成本极高
• 不要写带HTTP的地址：HTTPS站点内发起HTTP的API请求属于不安全的混合内容，现代浏览器会直接拦截请求，根本发不到后端
• 最优方案：如果前后端用同一个域名部署（比如前端页面走https://your-domain.com，Django接口走https://your-domain.com/api/路径，用Nginx做反向代理路径转发），前端可以直接写相对路径/api作为后端地址，完全不用考虑协议、域名变更问题，也从根源上避免了跨域问题。

之前部署出现502 Bad Gateway的常见排查方向 #

你之前填服务器IP部署报502，大概率和用IP当后端地址没有直接关系，常见原因有这几个：

• Nginx反向代理配置的后端转发地址错误，比如Django运行的Gunicorn/uWSGI服务没正常启动，或者服务监听的端口和Nginx里配置的转发端口不一致
• 服务器防火墙（包括ufw、云服务商安全组）没放开Django服务对应的监听端口，Nginx转发请求时连不上后端服务
• Django配置里的ALLOWED_HOSTS列表没加你当前访问用的IP/域名，请求被Django框架直接拦截
• 前端静态文件的Nginx托管路径配置错误，静态资源加载失败也可能触发502报错

构建后动态修改配置的方案 #

如果不想每次变更后端地址都重新构建React项目，可以把配置项放到独立的静态JS文件里，挂到window对象上供业务代码读取：

1. 在React项目的public目录下新建config.js文件，写入配置：

window.APP_CONFIG = {
  serverBase: process.env.NODE_ENV === 'production' ? "https://your-domain.com" : "http://localhost:8000"
}

2. 在public/index.html的head标签最前面引入这个JS文件：

<script src="/config.js"></script>

3. 业务代码里直接读取window.APP_CONFIG.serverBase作为后端请求地址即可。部署到服务器后如果要改后端地址，直接编辑服务器上托管的config.js文件，不用重新打包，刷新页面就会生效。

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