我正在使用 CodeIgniter 和 Restfull API 构建我的网络服务器私有(private) API。

我已经开始根据我正在使用的某些框架的要求使用 CORS。

使用 Jquery，我可以看到发送了 2 个请求，第一个作为 OPTION 类型 - 正如预期的那样 - 但没有我的自定义 header (用于安全的 X-API-KEY，默认情况下在 CodeIgniter Restful API 中)。

然后我收到如图所示的无效 API key 错误消息。然后在使用正确的 header 发送正确的请求之后，但与此同时，第一个请求触发了 .fail() 函数来处理错误。

处理这种情况的最佳做法是什么？我希望我的 ajax 请求能够顺利处理第一个预检选项请求，而不会像今天那样在我的应用程序上触发错误，然后根据 CORS 的工作方式使用自定义 header 执行正常的 GET 调用，并执行成功调用而不会触发错误调用第一个预检请求？

triggerFriendsWall: function() {
        //Get location
            var options = {
                timeout: 30000,
                enableHighAccuracy: true,
                maximumAge: 90000
            };

            //We need to check if user has disabled geolocation, in which case it makes the app crashes ! (from Cordova.js 1097)
            var position = JSON.parse(localStorage.getItem("position"));

            if (position == "" || position == null || position == "null" || typeof position == "undefined" ) {
                // In this case we have never set location to anything and the user has enabled it.
                navigator.geolocation.getCurrentPosition( function(position) {
                    home.friendsWall(position);
                }, function(error) {
                    common.handle_errors(error, home.friendsWall);
                }, options);
            } else {
                // in this case, user has disabled geolocatoin !
                common.handle_errors(false, home.friendsWall);
            }
},


friendsWall: function(position) {

    $.when(UserDAO.getUsersNearby(position.coords.latitude, position.coords.longitude, home.Usr_radius, home.Usr_limit, home.Usr_offset))
                .done(function(response) {
                   // Do stuff
    })
}


getUsersNearby: function(lat, lng, radius, limit, offset) {
            var key = localStorage.getItem("key");

            return $.ajax({
                type: "GET",
                url: config.server_url + 'user/usersSurrounding',
                headers: {
                    'X-API-KEY': key
                },
                data: {
                    lat: lat,
                    lng: lng,
                    radius: radius,
                    limit: limit,
                    offset: offset
                },
                dataType: 'json'
            });
        },

非常感谢

编辑: 这是与我的所有 Controller 关联的构造函数(所有 Controller 都扩展了一个 Controller ，其中构造方法是:)

public function __construct()
{

    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    $method = $_SERVER['REQUEST_METHOD'];
    if($method == "OPTIONS") {
        die();
    }

    parent::__construct();
    // $this->load->model('admin_model');
    $this->load->library('session');
    $this->load->library('key');
}

最佳答案

你在使用 Access-Control-Allow-Headers ？

Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

尝试将以下 header 添加到您的预检代码中。

header("Access-Control-Allow-Headers: content-type, origin, accept, X-API-KEY");

我记得有过类似的问题，似乎还记得其中一些问题也是特定于浏览器的......

如果有帮助，这里是一些我知道有效的代码片段:

// CORS and other headers.  Make sure file is not cached (as it happens for example on iOS devices)
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: ' . CORS_AUTH_MAX_AGE);

//CORS preflight
if (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    header("Access-Control-Allow-Headers: content-type, origin, accept, x-app-sig");

    $acrh = explode(',', strtolower($headers['Access-Control-Request-Headers']));
    foreach ($acrh as $k => $v) {
        $acrh[$k] = trim($v);
    }

    if (! isset($headers['Access-Control-Request-Headers']) || ! in_array('x-app-sig', $acrh)) {
        _log($h, '*** Bad preflight!' . PHP_EOL . print_r($headers, true) . PHP_EOL . print_r($_REQUEST, true));
        header("HTTP/1.1 401 Unauthorized");
        exit; //->
    }

    _log($h, '+++ Successful preflight.' . PHP_EOL . print_r($headers, true) . PHP_EOL . print_r($_REQUEST, true));
    exit; //->
}

//Now we are past preflight.  Actual Auth happens here, I check a signature that I post with payload.

更新:好的，我想我现在更能理解你的问题了。发布了更多代码。首先，是的，我们在那里做的事情本质上是一样的。我只是检查预检是否尝试将标题方面的内容列入白名单。

我认为您缺少的部分是预检应该/不会有您尝试发送的自定义 header 。在这里查看答案:How do you send a custom header in a cross-domain (CORS) XMLHttpRequest? ).所以就像我一样，您可以检查 Access-Control-Request-Headers: 是否随预检一起发送，但您不应该检查该调用中是否存在实际 header 。

听起来您只需要在服务器端移动一些代码 - 让预检变得非常普通和愚蠢，然后在预检成功后进行实际的身份验证或检查自定义 header 。

我自己使用与有效负载一起发送的 HMAC 签名在预检后对事物进行身份验证。我还检查是否提供了自定义 x-app-sig 以及我所期望的，尽管这可能是多余的。

关于javascript - 如何使用 CORS 飞行前请求处理自定义 header ？ AJAX-代码点火器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30920422/