angularjs - AngularJS 的 CORS 错误仅在 FireFox 中发布

Question

在 Ionic 应用程序中发出跨源请求时，我只遇到了 FireFox 的问题(因此它使用的是 AngularJS)。 js 应用程序正在对 Laravel 5.1 API 执行 $http.post()，并且我仅在 FireFox (39.0.3) 中收到以下错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://blah.dev/endpoint. (Reason: missing token 'content-type' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

这是在我的本地主机(OSX Mavericks)上。并且在 Chrome 和 Safari 中运行良好，只有 FireFox 出现错误。我已清除缓存，并在“私有(private)窗口”中尝试，结果相同。

这是为处理 OPTIONS 请求而定义的 Laravel 路由:

Route::options('endpoint', function() {
    return response('OK')
        ->header('Access-Control-Allow-Headers ', 'Origin, Authorization, X-Requested-With, Content-Type, Accept')
        ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0')
        ;
});

Route::post('endpoint', array('uses' => '\Path\To\Controller@endpoint'));

我确实找到了 this question这似乎只在 FireFox 中存在类似问题，但解决方案是用逗号分隔 Allow-Methods ，我已经是了。

Answer 1

消息“缺少 token 'content-type'”是关于客户端的。要使 http 请求成为有效的 post 请求，它必须有一个 header

'Content-Type': 'application/x-www-form-urlencoded' 

或者

'Content-Type': 'multipart/form-data'

第一种内容类型是最常见的。

在 angularjs 中，进行 CORS 发布请求的一种方法是

$http.post(
        'http://external-domain.ext/the/rest/url',
        'param_name=param_value',
        {headers:{'Content-Type': 'application/x-www-form-urlencoded'}}
    ).
    then(function successCallback(response) {
       $scope.something = response;
    }, function errorCallback(response) {
       // not good
    });

如果服务器配置有 header('Access-Control-Allow-Origin', '*') ，CORS 发布必须在没有身份验证和凭据的情况下成功。