GCP上NGINX配置Laravel API与Angular前端请求地址不可达求助

1. 修正前端API请求地址 #

这是最可能的核心问题：前端代码里直接写了后端VM的内部IP（172.x.x.7:8000），但用户浏览器是从公网访问前端的，浏览器无法直接访问GCP私有网络的内部IP。

• 改成请求Nginx服务器的公网地址 + /api 路径，比如Nginx公网IP是xxx.xxx.xxx.xxx，前端请求地址就写http://xxx.xxx.xxx.xxx/api/xxx
• 更灵活的方式：用相对路径请求，比如/api/xxx，这样会自动继承当前页面的域名/IP，不用硬编码地址

2. 优化Nginx代理配置 #

当前的转发规则基本正确，但补充必要的代理头能避免后端获取不到正确请求信息，修改后的配置如下：

events {
#empty
}

http {
    server {
        listen 80;

        location / {
            proxy_pass http://frontend;
            # 给前端也补充代理头
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }

        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://backend;
            # 后端代理必要头信息
            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;
        }
    }

    upstream frontend {
        server 172.x.x.4:4200;
    }

    upstream backend {
        server 172.x.x.7:8000;
    }
}

修改后重启Nginx：sudo systemctl restart nginx

3. 验证VM间网络连通性 #

• 在Nginx所在VM上执行curl http://172.x.x.7:8000，如果不通，说明GCP VPC防火墙阻止了流量，需要添加规则：允许Nginx VM的内部IP访问后端VM的8000端口
• 同样确认前端VM的4200端口允许Nginx VM访问（当前前端能正常访问，这一步大概率没问题，但可以排查确认）

4. 检查Laravel后端配置 #

• 确认Laravel服务在172.x.x.7:8000正常运行：在后端VM执行curl localhost:8000，看是否返回正常响应
• 处理CORS问题：如果浏览器报跨域错误，在Laravel的config/cors.php里配置允许的来源：

  'allowed_origins' => ['*'], // 或者指定Nginx的公网地址
  'allowed_methods' => ['*'],
  'allowed_headers' => ['*'],
  

5. 浏览器端错误排查 #

打开浏览器开发者工具（F12）查看Network标签的API请求：

• 如果是ERR_CONNECTION_REFUSED：就是前面说的浏览器无法访问内部IP的问题，必须改成通过Nginx转发
• 如果是404 Not Found：检查Nginx的rewrite规则和Laravel的路由是否匹配
• 如果是CORS相关错误：按步骤4配置Laravel的CORS或者在Nginx里添加CORS响应头

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