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

Posted 2023-03-03

【中文标题】在启用 CORS 的情况下，无法从我的请求标头中检索我的 x-api-key。为啥？

【英文标题】：Can't retrieve my x-api-key from my request header with CORS enabled. Why?在启用 CORS 的情况下，无法从我的请求标头中检索我的 x-api-key。为什么？

【发布时间】：2014-03-30 09:31:57

【问题描述】：

我正在使用 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 以便我可以验证我的用户？

非常感谢

【参考方案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
     
);

【讨论】：

谢谢，这绝对是一个很好的答案！我发现在使用智能手机解决我的问题时，您不需要 CORS 来进行跨域 ajax 调用。但我肯定会在不久的将来使用你的解决方案:)

你把它变成了phonegap应用还是什么的？我仍在尝试解决在 androids 上运行本地文件的问题

是的，使用 phonegap（或一般的移动应用程序），您不需要使用 Cors 或 jsonp 或任何东西来执行跨域请求。它可以简单地用 json 实现，无需特殊配置。就好像您正在使用 localhost .. 只需更改服务器 url。有用 ！我花了 2 分钟来删除标题和处理跨浏览器 ajax 调用的麻烦，因为出于安全原因，只有浏览器需要一些特定的配置来执行此操作，这显然不适用于移动应用程序。