Angular Headers Web API

Question

I am trying to add the X-APIKeys headers with every api call but they only have examples in curl. I have tried:

 var accessKey = "gdgfdgdfgdgdgfdgdfgfdgfdgdgh";
 var secretKey = "ggdgfdgdggtet565645654654654";
 $http.get("/information",{
  headers:{ {"X-APIKeys": accessKey, secretKey}}
    )

I have also tried to make an interceptor for config:

 config.headers['X-ApiKeys'] = {accessKey, secretKey}

The structure for X-APIKeys is what I think is causing me issues. I have provided a picture of the http headers they are looking for.

Full Request Header:

  Accept:*/*
  Accept-Encoding:gzip, deflate, sdch
  Accept-Language:en-US,en;q=0.8
  Access-Control-Request-Headers:accept, x-apikeys
  Access-Control-Request-Method:GET
  Connection:keep-alive
  Host:
  Origin:http://localhost:60531
  Referer:http://localhost:60531/
  User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.103 Safari/537.36

Here is the request header from trying Tomislav example:

Tomislav · Accepted Answer · 2016-02-08T13:27:05.373

1

Try this:

$http.get("/information",{
    headers: { 'X-ApiKeys': 'accessKey=' + accessKey+'; secretKey='+secretKey+';' }})

edited Feb 08 '16 at 13:27

answered Feb 08 '16 at 12:58

Tomislav

3,181
17
20

Its giving me a 405 method not allowed. When I do just $http.get("/information") it gives me a 401 authorization required. – Rethabile Feb 08 '16 at 13:10
I mistyped X-ApiKeys, edited my answer now. Can you give us request header after api call, try google chrome dev tool for that. – Tomislav Feb 08 '16 at 13:28
Status Code: 405 method not allowed. I added a picture of the request header to the question and I also changed the spelling. – Rethabile Feb 08 '16 at 13:36
Ok but can you give us full request header from Google Chrome Network tab, like in this SO: http://stackoverflow.com/a/15599537/1703503 – Tomislav Feb 08 '16 at 14:02
Okay, I'll add it to the question ' – Rethabile Feb 08 '16 at 14:05
Okay, its been added to the question. – Rethabile Feb 08 '16 at 14:11

score 0 · Answer 2 · answered Feb 08 '16 at 16:33

You should do an interceptor, because there are probably some CORS negotiation going on (OPTIONS?). This guarantees that all the requests have the header. Of course if only the request to a certain host should have the header, you must have an if that decides the inclusion or not. The Config is just a service were you can keep the api key values. If you don't want to do it just hard code the values.

'use strict';

var app = angular.module('App');

app.factory('apiKeyInterceptor', [function (Config) {

    var header = 'accessKey=' + Config.accessKey+'; secretKey='+ Config.secretKey+';'
    return {
      request: function (config) {
        config.headers = config.headers || {};

        config.headers['X-ApiKeys'] = header;
        return config;
      }
    };
  }]);

var app = angular.module('App', []).config(function($httpProvider) {
    $httpProvider.interceptors.push('apiKeyInterceptor');
}

Also be careful and check if they mean the {} in the curl command literally or as a placeholder.

I have added your suggestions but I believe the its still having a CORS issue. I would open up another question but it seems this is pretty common. The only thing with myself is that I don't have access to the server which makes a lot of their suggestions irrelevant in my case. Thank you for the update on the question it definitely helps with sending the headers on every request. — Rethabile, Feb 08 '16 at 18:43

Angular Headers Web API

2 Answers2