Azure容器部署N层应用API调用403 CORS问题求助

核心问题定位 #

你遇到的403 CORS错误本质并非CORS配置问题，而是前端请求的发起路径错误：

• 前端代码在用户浏览器中运行，调用my-api.azurewebsites.net的请求是从用户的公网IP直接发出的，而非从UI的App Service容器（VNET内部）发起。
• 你的API已禁用公网访问，Azure会直接拦截所有公网来源的请求并返回403，此时响应中没有CORS相关头，浏览器因此抛出CORS错误。即使禁用Chrome的CORS限制，浏览器仍会收到403响应，所以报错持续。
• 而SSH进入UI容器后能正常访问API，是因为请求从VNET内部IP发出，符合API的私有访问规则。

容器部署与代码部署的网络差异 #

两者在App Service网络层面的核心差异不会导致当前问题，但需明确：

• 网络栈归属：代码部署的应用直接运行在App Service沙箱的网络栈中；容器部署的应用使用自身容器网络栈，沙箱负责端口转发。但WEBSITE_VNET_ROUTE_ALL会强制沙箱所有出站流量走VNET，因此容器的出站流量也会被路由到VNET，这一点两者行为一致。
• DNS解析：代码部署应用直接使用WEBSITE_DNS_SERVER配置的DNS；容器部署默认继承沙箱DNS配置，若容器无自定义DNS覆盖，解析逻辑与代码部署一致（你的nslookup结果已验证这一点）。
• 请求源传递：容器部署的UI后端请求API时，源IP是容器的NAT IP；代码部署的是沙箱IP，但API仅限制公网访问，VNET内的IP都会被允许，因此该差异不影响访问。

解决方案 #

1. 添加UI后端代理逻辑
   在UI的容器应用中实现代理功能，前端调用UI的公开端点（如/api/proxy/*），由UI后端从VNET内部转发请求到API的私有地址。这样所有API请求都通过UI的VNET通道发起，避免浏览器直接访问API公网域名。
   示例（以Node.js为例）：

   const express = require('express');
   const { createProxyMiddleware } = require('http-proxy-middleware');
   const app = express();
   
   app.use('/api', createProxyMiddleware({
     target: 'http://my-api.azurewebsites.net',
     changeOrigin: true,
   }));
   
   app.listen(process.env.PORT || 8080);
   

2. 调整API的CORS配置
   配置API允许UI的App Service域名（如https://my-ui.azurewebsites.net）作为可信源，确保代理请求能正常获取CORS头。
3. 验证代理功能
   SSH进入UI容器后，测试访问http://localhost:<容器端口>/api/xxx，确认能正常转发到API并获取响应，再验证前端调用UI代理端点的效果。

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