`$httpProvider.defaults.headers`设置跨域头失败：深度剖析与解决方案

在AngularJS的世界中，我们常常会遇到与服务器进行异步交互的场景，而$http服务作为AngularJS的核心组件之一，承担着数据获取和提交的重要任务。然而，在我们处理那些跨域请求的时候，有时候会碰到这么个头疼的问题：尝试通过 `$httpProvider.defaults.headers` 设置跨域头，结果却不灵了。这无疑给咱们的开发工作添了不少堵，让人挺抓狂的。这篇文章咱们要一探这个问题的究竟，我不仅会跟你唠唠嗑理论，还会手把手地带你瞧瞧实例代码，一步步揭开事情背后的原因，顺便找出解决它的锦囊妙计。

1. `$httpProvider.defaults.headers`简介

在AngularJS中，`$httpProvider` 是一个提供全局配置$http服务的对象。喏，你知道吗，`defaults.headers`这个小特性可厉害了，它能让我们在所有$http请求里头预先设置默认的HTTP头信息。想象一下，如果你的应用经常需要给每一条请求都加上特定的HTTP头部信息，那有了这个功能，就简直太省事儿、太方便啦！例如，为了实现跨域资源共享（CORS），我们可能需要设置`'Access-Control-Allow-Origin'`等头部信息。

angular.module('myApp', []).config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
}]);

2. 跨域头设置为何失败？

尽管上面的代码看似合情合理，但实际应用中你会发现，通过`$httpProvider.defaults.headers`来设置`Access-Control-Allow-Origin`这样的跨域响应头是无效的。这是因为涉及到跨域的那些个“Access-Control-Allow-Origin”、“Access-Control-Allow-Methods”这些头信息呐，它们都是服务器端的大佬掌控着，然后发送给咱们客户端浏览器的。可不是咱们前端写JavaScript（包括AngularJS）的小哥能直接设置滴。
浏览器遵循同源策略，对于跨域请求，只有接收到服务器明确允许的相应头部信息后才会放行。因此，前端试图通过`$httpProvider.defaults.headers`设置这些跨域响应头的行为无法产生预期效果。

3. 解决方案

服务器端配置
既然前端无法直接设置跨域响应头，那正确的做法就是去服务器端进行相应的配置。以Node.js + Express为例：

const express = require('express');
const app = express();
// 允许来自任何域名的跨域请求
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
  if (req.method === 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
});
// 这里是你的路由配置...

4. 客户端注意事项

虽然前端不能设置跨域响应头，但在发起带自定义请求头的跨域请求时，仍需在`$httpProvider.defaults.headers`中声明这些请求头，以便让服务器知道客户端希望携带哪些头部信息：

angular.module('myApp').config(['$httpProvider', function ($httpProvider) {
  $httpProvider.defaults.headers.common['X-Custom-Header'] = 'some-value';
}]);
// 在$http请求中使用
$http({
  method: 'POST',
  url: 'https://api.example.com/data',
  headers: {'Content-Type': 'application/json'},
  data: { /
... */ }
});

总结起来，虽然我们不能通过 `$httpProvider.defaults.headers` 来直接解决跨域问题，但它仍然是我们定制请求头部信息不可或缺的工具。要真正搞定跨域问题，关键得先摸清楚跨域策略的来龙去脉，然后在服务器那边儿把配置给整对了才行。在我们做前端开发这事儿的时候，千万要记牢这个小秘诀，这样一来，当咱们的AngularJS应用碰到跨域问题这块绊脚石时，就能轻松应对、游刃有余啦！