App Engine服务间授权异常：前端调用后端403错误排查与解决

两种请求的发起端本质完全不同：

• 浏览器中执行的fetch请求，是从用户本地设备发起的，走公网IP访问后端服务。而你将后端设置为「仅内部流量访问」，只有GCP内部服务的IP才被允许，因此这个公网请求被拦截，返回403。
• SSH登录前端实例后执行的Python请求，是从前端App Engine实例的内部IP发起的，属于GCP内部流量，符合后端的访问控制规则，所以能成功访问。

你需要在Node.js前端服务中添加代理路由，让浏览器的请求先发给前端服务，再由前端服务从内部转发到后端服务（此时用的是实例内部IP，属于允许的流量范围）。

步骤1：安装代理依赖 #

在前端服务的项目目录下执行：

npm install http-proxy-middleware

步骤2：配置代理路由 #

假设你的前端基于Express框架，在主入口文件（比如app.js）中添加以下代码：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 配置代理：将前端的/api路径转发到后端服务
app.use('/api', createProxyMiddleware({
  // 推荐使用后端服务的内部域名，格式为 default-dot-[你的GCP项目ID].appspot.com
  // 内部域名走GCP私有网络，无需公网流量，更安全高效
  target: 'https://default-dot-your-project-id.appspot.com',
  changeOrigin: true,
}));

// 其他前端路由和中间件配置...
app.listen(process.env.PORT || 8080);

步骤3：修改前端fetch请求 #

把浏览器中的fetch目标改为前端服务的相对路径，让请求走代理：

fetch('/api/hello-world', { 
  method: 'GET', 
  headers: { 'Content-Type': 'application/json'} 
})
.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error(err));

这样修改后，浏览器请求先到达前端服务，再由前端服务从内部转发到后端，就能绕过403限制，正常访问API了。

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