angular - 自动将前端应用程序的标头附加到外部http请求？

Question

假设我的前端应用程序中有一些请求逻辑。其中一些用于 api.foo.com，而另一些用于 api.bar.com。

我想在对 api.foo.com 的每个请求上设置一个标头 HELLO="WORLD"（值可以是常量或动态（由 js 提供）），但不是 api.bar.com。

由于手动为许多请求指定相同的标头既麻烦又容易出错，我希望它是自动的。目前，我认为这可以通过自定义http客户端来完成。例如，我可以包装 axios 并在其中注入一些头逻辑，并使用对象而不是普通的 axios。

但是，我想知道是否有更优雅或推荐的方法（或者请分享任何可能的解决方案）。

目前，我正在使用 Vue，但也分享其他特定于框架的解决方案，因为我相信其他人可能会发现你的解决方案有帮助。

谢谢。

标签： angularreactjsvue.jsaxiosfrontend

Answer 1

您可以使用Axios 拦截器。写这样的东西：

axios.interceptors.request.use(request => {
  if (request.url.includes('api.foo.com')) request.headers['HELLO'] = 'WORLD';
  return request;
});

实时代码笔。

如果您需要向拦截器发送一些数据，请参阅此处如何执行此操作。