Angular $http 返回“no access control allow origin”标头，但 jQuery $.get 请求返回信息

Question

jQuery $.get、$.post 怎么能得到想要的结果，但 Angular 却不能 $http.get、$http.post？为什么原始策略不适用于 Angular 而适用于 jquery？

Laravel 后端，角度前端。我正在考虑只使用 jQuery，因为它不会阻止客户端发生 CRUD 操作。

我配置了 $http 和 $httpProvider...

.run(function($http){
     $http.defaults.headers.common['Access-Control-Allow-Origin'] = "*";
     $http.defaults.headers.common['Access-Control-Allow-Methods'] = "GET, POST, PUT, DELETE, OPTIONS";
     $http.defaults.headers.common['Access-Control-Allow-Headers'] = "Authorization";
})
.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
})

并且 laravel 正在发回适当的标头...

App::after(function($request, $response)
{
    // header('Access-Control-Allow-Origin', '*');
     $response->headers->set('Access-Control-Allow-Origin', '*');
});

所以奇怪的是 angular $http 无法从服务器获取任何内容并产生此错误：

XMLHttpRequest cannot load http://0.0.0.0:8000/api/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. 

但是 jQuery $.get 和 $.post 可以正常工作！

$.post('http://0.0.0.0:8000/api/test', function(resp){
    console.log(resp);
});

我在这里做错了什么？

Answer 1

.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

仅将 useXDomain 设置为 true 是不够的。 AJAX 请求也与X-Requested-With 标头一起发送，这表明它们是 AJAX。删除标头是必要的，因此服务器不会拒绝传入的请求。

尝试在 filters.php 中添加这个：

App::before(function($request)
{
    if (Request::getMethod() == "OPTIONS") {
        $headers = array(
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'X-Requested-With, content-type, Authorization',);
        return Response::make('', 200, $headers);
    }
});

飞行前请求可能失败