如何解决React调用Rails后端时localhost指向用户本地的问题？

云原生阿岚

2026-8-9

解决React调用Rails后端指向用户本地localhost的问题

核心原因

前端代码里直接写http://localhost:3000是在浏览器端执行的，浏览器会将这个地址解析为用户本地的localhost，而非部署Rails服务的服务器地址。

解决方案

方案一：Nginx反向代理（推荐）

通过Nginx将前端的API请求转发到Rails服务，前端用相对路径发起请求：

修改React代码中的请求地址，把http://localhost:3000/api/xxx改为/api/xxx（相对路径）
编辑Nginx站点配置文件（比如/etc/nginx/sites-available/your-site.conf），添加反向代理规则：

server {
    listen 80;
    server_name 你的域名或服务器IP;

    # 托管React静态文件
    location / {
        root /你的React项目打包后build目录路径;
        try_files $uri $uri/ /index.html;
    }

    # 转发API请求到Rails服务
    location /api {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

测试Nginx配置合法性：sudo nginx -t
重启Nginx生效：sudo systemctl restart nginx

方案二：配置前端环境变量

直接在React中指定服务器的实际地址，避免硬编码localhost：

在React项目根目录创建.env.production文件，添加：

REACT_APP_API_URL=http://你的服务器公网IP或域名:3000

代码中通过环境变量拼接请求地址：process.env.REACT_APP_API_URL + '/api/xxx'
重新打包React项目：npm run build，再部署到Nginx

方案三：配合方案二的Rails CORS配置

如果直接请求服务器3000端口，需要在Rails中配置跨域访问权限：

在Rails项目的Gemfile中添加rack-cors，执行bundle install
编辑config/initializers/cors.rb，取消注释并修改：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '你的前端域名或服务器IP'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end