Question

我正在尝试使用拦截器使用以下代码为AngularJS App中的每个请求添加自定义标头：

angular.module('app').factory('httpRequestInterceptor', function () {
    return {
        request: function (config) {
            config.headers['testheader'] = 'testheaderworks';

            return config;
        }
    };
});

angular.module('app').config(function ($httpProvider) {    
    $httpProvider.interceptors.push('httpRequestInterceptor');
});

此代码已从答案复制到this question

不幸的是，当我检查生成的请求时，我得到以下内容：

显示临时标题

Access-Control-Request-Headers：accept， testheader

访问控制请求-方法：GET

产地：http://localhost:61577

的Referer：http://localhost:61577/

User-Agent：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 46.0.2490.86 Safari / 537.36

我在Chrome的网络标签和服务器端都确认了这一点。为什么自定义标题键'testheader'被添加到 Access-Control-Request-Headers 而不是常规标题？价值发生了什么变化？是否有另一种方法可以为每个避免此问题的AngularJS请求添加自定义标头？

Answer 1

如果有人读到这个并且遇到同样的问题：

问题在于Angular正在制作一个浏览器阻止的跨源请求。为了启用此请求，我必须在服务器端启用标头。在我们的例子中（NodeJs），执行此操作的代码是：

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Headers", testheader");
    next();
});

AngularJS中添加的自定义标题仅显示在Access-Control-Request-Headers

1 个答案: