无法从启用了CORS的请求标头中检索我的x-api-key。为什么?

时间:2014-02-27 06:02:04

标签: ajax apache api codeigniter cors

我正在使用CodeIgniter2 Rest API和AJAX从带有PhoneGap的智能手机向带有apache的AWS服务器发出请求。

在我的localhost /浏览器上工作时一切正常。 但是当试图建立一个远程服务器时,事情变得糟糕。

我已经使用CORS正确配置了我的服务器,因此它允许外部请求,如下所述: http://dev.nuclearrooster.com/2011/01/03/cors-with-apache-mod_headers-and-htaccess/

为了保护API,我一直在设置一个API KEY,我必须在我的请求的标题中传递,如下所示:

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

但是,在看到我的ajax因为无效的API密钥被拒绝后,我一直在努力确保服务器收到密钥。它没有。当我试图回复我的钥匙时,它是空的。

我可以在调试控制台中看到以下内容:

  

请求标头字段Access-Control-Allow-Headers不允许使用X-API-KEY。

所以我在this post之后修改了我的.htaccess:

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"

现在,消息已经消失,但问题仍然存在......为什么?

如何通过我的AJAX调用Header传输此X-API-KEY,以便我可以对用户进行身份验证?

非常感谢

1 个答案:

答案 0 :(得分:2)

我遇到了这个问题,经过数周的调整,我能够让它与一个工作的黑客一起工作......我不记得确切的部分确实解决了它但会提供我目前正在使用的东西

服务器端

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);
}

客户端

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
        }
    });
}

由于您正在使用GET请求,因此可能使用JSONP会更有用,这可以避免跨域请求。

JSONP请求

$.ajax({
     type : "GET",
     dataType : "jsonp",
     url: server_url + "user/available?callback=?", // ?callback=?
     success: function(data){
           // do stuff with data
     }
});