本地React应用连接Azure AKS中Nginx Ingress的CORS问题排查

问题概述 #

本地启动的React应用（http://localhost:3000）调用Azure AKS上的认证服务（通过本地hosts映射的myexample.com）时触发CORS错误，但Postman可正常请求该接口；已配置Ingress CORS注解和Node.js服务端CORS中间件，但Chrome响应头无CORS相关字段，且Ingress控制器日志无本地应用的请求记录。

排查方向及操作步骤 #

1. 确认本地请求是否到达AKS Ingress #

Ingress日志无本地请求记录是核心疑点，先排查请求链路是否通畅：

• 用curl模拟浏览器的预检OPTIONS请求，验证请求是否能穿透到云端：

  curl -v -X OPTIONS http://myexample.com/api/users/signin -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: POST"
  

• 若curl也无法在Ingress日志中找到记录，继续排查：
  • 检查Azure公网IP对应的网络安全组（NSG），确认是否允许本地IP的80端口入站流量
  • 验证本地hosts映射正确性：执行ping myexample.com，确认返回IP为Azure公网IP
  • 排查本地防火墙、杀毒软件或VPN是否拦截了请求

2. 验证Ingress CORS配置的有效性 #

虽然kubectl describe显示注解生效，但需确认Nginx配置是否正确生成：

• 进入Ingress控制器Pod，查看生成的Nginx配置文件：

  kubectl exec -it <ingress-controller-pod-name> -n <ingress-namespace> -- cat /etc/nginx/nginx.conf
  

• 定位到myexample.com对应的server块，检查/api/users路径下是否包含正确的CORS规则，比如：

  add_header Access-Control-Allow-Origin http://localhost:3000;
  add_header Access-Control-Allow-Methods PUT, GET, POST, OPTIONS;
  add_header Access-Control-Allow-Credentials true;
  

• 暂时关闭Node.js服务端的CORS中间件，避免Ingress与服务端的CORS配置冲突

3. 修正Axios请求的凭据配置 #

Ingress已开启cors-allow-credentials: "true"，但Axios默认不携带凭据，需显式配置：
修改React登录请求代码，添加withCredentials: true参数：

login: ({ username, password }) => {
  let url = 'http://myexample.com/api/users/signin';
  const authData = {
    email: username,
    password: password,
  }
  // 添加withCredentials配置
  return axios.post(url, authData, { withCredentials: true })
    .then(response => {
      localStorage.setItem('userID', response.data.id);
    })
    .catch(error => {
      throw new Error(error.response.request.response);
    });
}

4. 排查SSL/HTTP重定向问题 #

若AKS Ingress配置了强制HTTPS重定向，会导致HTTP的OPTIONS预检请求被重定向，触发CORS错误：

• 检查Ingress是否包含nginx.ingress.kubernetes.io/force-ssl-redirect: "true"注解，若有则暂时关闭测试
• 尝试用curl访问https://myexample.com/api/users/signin，确认是否存在HTTPS强制跳转

5. 调整Ingress路径匹配规则 #

当前Ingress路径/api/users/?(.*)的正则匹配可能存在问题，尝试简化路径规则：
将路径修改为：

path: /api/users/
pathType: Prefix

或调整正则为更严谨的写法：

path: /api/users(/|$)(.*)

重新部署Ingress后测试请求是否能正确路由到认证服务

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