Angular 1.5.5因CORS导致响应状态返回NULL(-1)而非503，如何获取真实状态？

这个问题的核心原因是浏览器的同源策略限制：当请求跨域且后端没有返回正确的Access-Control-Allow-Origin响应头时，浏览器会直接拦截整个响应，不会把真实的状态码（比如503）暴露给前端JavaScript，这就是为什么Angular的$http只能拿到NULL(-1)的原因。

下面给你两种可行的解决方案：

1. 修复后端的CORS配置（最优解） #

这是从根源解决问题的方法，只要后端在返回503响应时同时添加正确的CORS头，浏览器就会允许前端获取真实的状态码。

具体操作示例 #

• 如果是后端代码（比如Node.js/Express），在返回503响应时添加以下头：

  res.status(503);
  // 生产环境建议指定具体前端域名，而非*
  res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.send('Service Unavailable');
  

• 如果是用Nginx反向代理，在配置中添加：

  location / {
      # always确保错误响应也能带上CORS头
      add_header Access-Control-Allow-Origin https://your-frontend-domain.com always;
      add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
      add_header Access-Control-Allow-Headers "Content-Type" always;
      
      # 处理OPTIONS预检请求
      if ($request_method = OPTIONS) {
          return 204;
      }
      
      proxy_pass http://your-backend-server;
  }
  

配置完成后，Angular的$http就能正常捕获到503状态码了。

2. 使用前端代理服务器（后端无法修改时的替代方案） #

如果后端暂时无法调整CORS配置，你可以通过搭建一个前端代理服务器，让前端请求先发送到代理服务器，再由代理服务器转发请求到目标后端。这样就不存在跨域问题，前端就能拿到真实的503状态码。

Angular 1.5.5中的代理配置示例 #

以Webpack Dev Server为例，在webpack.config.js中添加代理配置：

module.exports = {
  // 其他配置项...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server',
        changeOrigin: true,
        pathRewrite: {'^/api': ''} // 按需重写路径
      }
    }
  }
};

然后Angular中的$http请求改为指向代理地址：

$http.get('/api/your-api-path')
  .then(function(response) {
    // 成功逻辑
  })
  .catch(function(error) {
    console.log(error.status); // 此时能拿到真实的503状态码
  });

生产环境中，你可以用http-proxy-middleware搭建一个简单的Node代理服务：

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

app.use('/api', createProxyMiddleware({
  target: 'http://your-backend-server',
  changeOrigin: true
}));

app.listen(3000, () => {
  console.log('代理服务器运行在3000端口');
});

前端请求这个代理服务器的3000端口即可绕过跨域限制。

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