当前位置: 动力学知识库 > 问答 > 编程问答 >

ajax - Can't retrieve my x-api-key from my request header with CORS enabled. Why?

问题描述:

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

网友答案:

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
     }
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: