Angular 角度：向dev`ng服务添加自定义HTTP响应头`

是否可以将自定义HTTP响应头添加到使用

ng serve

运行的开发服务器？我特别想在主

html

文件请求的响应中添加这个自定义头，不过如果为每个资源（

js

文件等）添加它就可以了

我发现了最近的两个问题：

但我仍然不清楚是否有可能做到这一点，以及如何做到这一点

我添加了一个

proxy.config.js

文件（引用自

angular.json

，部分

projects->my app->architect->service->options->proxyConfig

），并尝试了几种配置，如以下配置，但都没有成功：

module.exports={
"/": {
“标题”：{
“X-Custom-Foo”：“bar”
},
onProxyRes：（proxyRes，req，res）=>{
代理标题['x-added']='foobar'；
}
},
“标题”：{
“X-Custom-Foo”：“bar”
},
onProxyRes：（proxyRes，req，res）=>{
代理标题['x-added']='foobar'；
}
};

---

不必使用第三方服务器就可以这样做吗？

假设您试图模拟生产环境，设置相同的响应头值：您可以在代理配置中使用

旁路

，而不是

onProxyRes

。您没有尝试将呼叫重定向到另一台服务器（

target

value）并在

onProxyRes

中处理应答，因此请避免使用它，并尝试使用

旁路。它应该工作得很好；）

proxy.conf.js如下所示：

module.exports = {
    "/": {
        "secure": false,
        "bypass": (req, res, proxyOptions) => {
            res.setHeader('X-Header-Test', 'bacon');
         };
    }
};

noga的答案对于
proxy.conf.js
的外观是正确的。在Angular版本8+（我猜是因为新的构建器API的稳定和对webpack的更新）中需要做更多的工作

这一切都建立在
webpack dev server
和
http代理中间件
上，如果您查看webpack站点上的信息，它会显示：

请注意，默认情况下不会代理对root用户的请求。要启用根代理，应将devServer.index选项指定为falsy值

不幸的是，
ng serve
没有直接公开此属性，它是
proxy
的兄弟属性，它接收
proxy.conf.js
的输出。您可以制作自己的构建器，也可以深入挖掘
node_modules>@angular devkit>build angular>src>dev server>index.js
并插入
webpackDevServerConfig.index=''webpackDevServerConfig
后的code>

这对我来说很有用

更新：角度11

一位评论人士指出，这种方法不适用于Angular 11。现在我已经咬紧牙关并升级了，我有了一个有效的解决方案

原理仍然是一样的：dev服务器的配置需要将
index
属性设置为空字符串

在上述同一文件的第87行定义了
config
后，在Angular 11中插入
config.devServer.index=”“
，上述解决方案不起作用

由于上面的上下文是developmentserver（这是我的用例），所以我最后所做的只是通过禁用CROS检查来启动Chrome

这种方法的好处是：（i）避免角度或节点更改破坏您的工作；（ii）无需更改即可使不同端口上的本地开发人员正常工作

例如，在Mac上：

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

更多信息如下：


如果可以，你是什么意思？标题可以是您想要的任何内容，重要的部分是您如何在服务器端处理和使用它。我不确定您为什么希望设置
标题
键来产生这种效果，从via到的文档并不表明该选项可以做任何事。@Bargros我不是说HTTP请求标题。我说的是HTTP响应头。我希望angular dev服务器向我发送一个自定义头。@jonrsharpe我不仅要设置
头
（一个绝望的尝试），我还要设置
onProxyRes
，这应该可以工作。你知道什么是实现它的正确方法吗？谢谢您是否进行过任何调试？对于您试图添加头的请求，是否会调用该函数？我不认为代理用于实际资产，而是用于后端API调用（而且它也不是为生产使用而设计的）。我建议您提供更多关于您为什么要设置这些标题的上下文。天哪，这很有效！非常感谢，伙计。我从来没有想到过用
旁路
功能来做这个把戏。太棒了，我用过它，但它似乎只适用于第一次调用，对于其他请求调用，它不起作用。@Namdokarande尝试将
路径
从
/
更改为
*
，它应该应用于任何调用，而不仅仅是第一次调用。@kayjtea它适用于此目的。不管怎样，你有没有更好的解决办法或者你认为它会奏效？提前谢谢我花了很长时间在angular 8上——我无法让它工作。而且，我的代理配置更复杂，路由更多。我需要ng serve为静态内容插入标题，但继续向后端传递一些路由。我放弃了，这在我11岁的时候不起作用
webpackDevServerConfig
甚至不存在（它已被重命名，使用重命名的版本也不起作用）。感谢您指出这一点！我更新了我的答案，以反映如何在Angular 11中做到这一点