条件AngularJS $ httpProvider拦截器?由于与Access-Control-Allow-Header冲突,Google地图拒绝了请求

时间:2015-08-15 15:02:32

标签: javascript angularjs google-maps

我正在构建一个MEAN堆栈应用程序,对于身份验证/授权,我基本上遵循了scotch.io的MEAN Machine书籍的建议。所以,我正在使用JWT并通过http拦截器将它们附加到客户端的每个请求。然而,该应用程序的一个功能是谷歌地图,绘制与用户相关的各种点,我在地图控制器中运行一个功能,从列表中对城市/州值进行地理编码并将其放在地图上

直到昨天我才开始在控制台中看到以下错误:

i

我在app.config中设置了拦截器:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/geocode/json?address=READING,+PA&key=<API_KEY>. Request header field Authorization is not allowed by Access-Control-Allow-Headers.

我最初使用的是本书中使用的请求标头$httpProvider.interceptors.push('AuthInterceptor'); ,但收到的错误相同。我改为x-access-token,认为它可能更常被接受。但那并没有奏效。所以我认为最好的方法可能是有条件地将请求标题添加到任何不会发送到map.googleapis.com的请求中:

Authorization

但这些条件陈述都没有奏效。我是否正确地思考这个问题?假设这是错误的来源,我是否正确?如果请求符合某些标准,或者不是AngularJS拦截器的工作方式,那么应该可以将app.factory('AuthInterceptor', ['$q', 'AuthToken', function($q, AuthToken) { var interceptorFactory = {}; // attach the token to every HTTP request interceptorFactory.request = function(config) { // have tried a couple conditional statements to avoid // attaching the Authorization header to google maps requests: // if (config.url.substr(8, 19) !== 'maps.googleapis.com') { if (!_.startsWith(config.url, 'https://maps.googleapis.com') { // grab the token var token = AuthToken.getToken(); // if the token exists, add it to the header as Authorization if (token) { config.headers['Authorization'] = token; } } return config; }; ... return interceptorFactory; }]); 标头从请求中删除?

任何建议都将不胜感激!感谢。

更新:我忽略了在Authorization之后加入第二个括号。它现在按预期工作。

0 个答案:

没有答案