在启用 CORS 的情况下，无法从我的请求标头中检索我的 x-api-key。为什么？

Question

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

在我的本地主机/浏览器上工作时一切正常。 但是在尝试设置远程服务器时，事情变得很糟糕。

我已经使用 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。

所以我一直在修改我的 .htaccess 以下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"

所以现在，消息消失了，但问题仍然存在......为什么？

如何通过我的 AJAX 调用标头传输此 X-API-KEY 以便我可以验证我的用户？

非常感谢

Answer 1

我遇到了这个问题，经过数周的调整，我能够让它与一项工作一起工作......我不记得修复它的确切部分，但会提供我目前使用的内容.

服务器端

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