1

I'm working with CodeIgniter2 Rest API and AJAX to make requests from a smartphone with PhoneGap to a AWS server with apache.

Everything was working fine when working on my localhost/browser. But when trying to set up a distant server things got bad.

I have configured my server properly with CORS so that it allows external requests as explained here : http://dev.nuclearrooster.com/2011/01/03/cors-with-apache-mod_headers-and-htaccess/

To secure the API, I have been setting up an API KEY that I have to pass in the header of my request like so:

    $.ajax({
        type:"GET",
        url: server_url + 'user/available',
        headers: { 'X-API-KEY': key },
        dataType: 'json'
    });

But then, after seeing my ajax called being refused because of an invalid API Key, I have been trying to make sure the server received the key. and it doesnt. when I try to echo my key, its empty.

I can see in my debug console the following:

Request header field X-API-KEY is not allowed by Access-Control-Allow-Headers.

So I have been modifying my .htaccess following this post:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, x-api-key"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

so now, the message is gone but the problem still remains the same ... why ?

How can I transmit this X-API-KEY through my AJAX call Header so I can authentificate my users ?

Many Thanks

Community
  • 1
  • 1
Miles M.
  • 4,089
  • 12
  • 62
  • 108

1 Answers1

2

I faced this problem and with weeks of tweaking I was able to get it to work with a hack of a job... I can't remember the exact part that did fix it but will provide with what I am currently using.

Server Side

function __construct(){
    parent::__construct();
    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
      header("Access-Control-Allow-Headers: X-API-KEY");
    }

function available_options(){
    $this->response(array('response' => array()), 200);
}

Client Side

function sendData(dataToSend, successCallback) {
    window.default_headers['X-API-KEY'] = '_KEY_';
    return  $.ajax({
        type: "POST",
        url: server_url + 'user/available',
        data: { data : JSON.stringify(dataToSend) }, // serializes the form's elements.
        dataType: 'json',
        headers: window.default_headers,
        xhrFields: {
            withCredentials: true
        }
    });
}

Since you're using a GET request, possibly using JSONP would be of more use, this avoids cross domain requests.

JSONP Request

$.ajax({
     type : "GET",
     dataType : "jsonp",
     url: server_url + "user/available?callback=?", // ?callback=?
     success: function(data){
           // do stuff with data
     }
});
Bankzilla
  • 2,086
  • 3
  • 25
  • 52
  • Thanks, that's definitively a great answer ! I've found out that YOU DONT NEED CORS to make cross domain ajax calls when working with smartphones which solve my problem. But I would definitively use your solution in a near futur :) – Miles M. Feb 28 '14 at 00:05
  • Did you turn it into a phonegap app or something? I'm still trying to get around the problem running local files on androids – Bankzilla Feb 28 '14 at 01:25
  • yes, with phonegap (or mobile apps in general), you don't need to use Cors or jsonp or anything to perform a cross domain request. it can simply be achieved with json and no particular configuration. Just as if you were working with localhost .. simplu change the server url. It works ! It took me 2 mins to remove the headers and the hassle to handle cross browser ajax calls since ONLY browsers need some specific configurations to do this, for security reasons, that apparently doesn't apply to mobile apps. – Miles M. Feb 28 '14 at 05:09