关于生产与开发环境的困惑及React+Express部署疑问

先搞懂：请求里的Origin到底是什么？ #

浏览器发起跨域请求时，Origin指的是加载前端页面的那个域名/地址，不是用户的IP。比如开发环境里React跑在localhost:3000，浏览器从这个地址加载页面，所以所有从这个页面发的请求，Origin都是http://localhost:3000，和用户自己的IP完全没关系。

这类前后端分离应用的正确部署流程 #

不需要先部署后端再改前端代码再部署，更高效的方式有两种：

• 方式一：后端托管前端静态文件
  把React打包后的build文件夹放到Express的静态资源目录里，比如用app.use(express.static('build'))，然后前端请求直接写相对路径（比如/api/user），这样前后端同域名，根本不存在跨域问题。
• 方式二：前后端分开部署
  1. 先把Express后端部署到云服务器，绑定好域名（比如api.yourdomain.com）
  2. 把React前端部署到静态托管服务（比如Nginx、Vercel、阿里云OSS），绑定前端域名（比如www.yourdomain.com）
  3. 前端代码里把请求地址改成后端的域名（比如https://api.yourdomain.com/api/user），打包后部署

生产环境的跨域问题怎么处理？ #

如果是前后端分开部署，肯定会有跨域，这时候后端的Allowed Origin不能瞎设：

• 别用*，因为*和携带Cookie的请求不兼容，而且不安全，谁都能调用你的接口
• 直接把前端的部署域名加到Allowed Origin里，比如https://www.yourdomain.com，Express里可以用cors包这么配置：

  const cors = require('cors');
  app.use(cors({
    origin: 'https://www.yourdomain.com',
    credentials: true // 如果需要携带Cookie的话开启
  }));
  

• 如果有多个前端域名（比如测试环境和生产环境），可以写个白名单判断：

  const allowedOrigins = ['https://www.yourdomain.com', 'https://test.yourdomain.com'];
  app.use(cors({
    origin: (origin, callback) => {
      if (allowedOrigins.includes(origin) || !origin) {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'));
      }
    }
  }));
  

为什么生产环境的Origin不是localhost？ #

生产环境里，你的React应用是部署到真实域名（比如www.yourdomain.com）的，用户浏览器是从这个域名加载页面的，所以请求的Origin就是这个域名，根本不会是localhost。只有开发环境里你在本地跑React，Origin才是localhost:3000。

关于用户IP的补充 #

请求里确实会携带用户的客户端IP，但这和Origin是两回事。后端可以通过req.ip拿到用户IP，但这个IP不影响跨域判断，跨域只看Origin。

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