Question

在Ionic应用程序中发出交叉原始请求时，我只遇到FireFox的问题（所以它使用AngularJS）。 js应用程序正在对Laravel 5.1 API执行$ http.post（），我只在FireFox（39.0.3）中收到以下错误：

阻止跨源请求：同源策略禁止在http://blah.dev/endpoint读取远程资源。（原因：在CORS标题中缺少令牌＆＃39;内容类型＆＃39;来自CORS预检频道的访问控制允许标题）。

这是我的本地主机（OSX Mavericks）。并且在Chrome和Safari中运行良好，只有FireFox会出错。我已经清除了缓存，并在＃34;私人窗口中尝试了＃34;，结果相同。

这是为处理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

消息“遗失令牌'内容类型'”与客户有关。要使http请求成为有效的帖子，它必须有一个标题

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

或

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

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

在angularjs中，执行CORS post请求的一种方法是

$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帖子必须在没有身份验证和凭据的情况下成功。

Answer 2

在后端

尝试放

->header('Access-Control-Allow-Credentials', 'true')

并在前端尝试放

.config(function($locationProvider, $httpProvider) {
    // CORS requests with credentials
    $httpProvider.defaults.withCredentials = true;
})

仅在FireFox中使用AngularJS发布的CORS错误

2 个答案: