Question

我使用AngularJS托管here开发了一个简单的应用程序。我正在使用我在Laravel托管here时自己开发的API。当我尝试使用Firefox登录应用程序时，它工作正常。我的API接受飞行前的OPTIONS请求，并以200 OK响应。最后，POST请求生成一个令牌，用户已登录。

另一方面，当Chrome发送飞行前OPTIONS请求时，它会收到403返回，并在控制台中显示此错误：

XMLHttpRequest cannot load http://angulairapi.rohanchhabra.in/auth. Invalid HTTP status code 403

我已尝试通过Postman REST客户端在/ auth上发送OPTIONS请求，并按预期返回200 OK。为什么Chrome会像这样？我错过了什么？

Answer 1

首先，你必须发送那些标题（通配符有时不正确）：

Access-Control-Allow-Headers: X-Requested-With, content-type
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS

在第二个（也是重要的）从配置中的AngularJs服务$ httpProvider中删除标题：

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

Answer 2

filters.php (Laravel 4.2)

中的

添加以下

App::before(function($request)
{
    // Enable CORS 
    // In production, replace * with http://yourdomain.com 
    header("Access-Control-Allow-Origin: *");
    //header('Access-Control-Allow-Credentials: true'); optional

    if (Request::getMethod() == "OPTIONS") {
        // The client-side application can set only headers allowed in Access-Control-Allow-Headers
        $headers = [
            'Access-Control-Allow-Methods'=> '*',
            'Access-Control-Allow-Headers'=> '*'
        ];
        return Response::make('You are connected to the API', 200, $headers);
    }
});

您可以更改Access-Control-*的值以满足您的需求

Answer 3

Access Control是服务器的责任，您需要在Laravel中进行配置。

使用此软件包： Laravel Cors 这非常有用。

Answer 4

“访问控制 - 请求 - 标头：接受”中的问题。您需要在“Access-Control-Allow-Headers”中添加“accept”。

比较这两个请求：

Chrome：403禁止使用 curl'http://angulairapi.rohanchhabra.in/auth'-X OPTIONS -H'Access-Control-Request-Method：POST'/angulair.rohanchhabra.in'-H'Eccept-Encoding：gzip，deflate，sdch'-H'Eccept-Language ：ru-RU，ru; q = 0.8，en-US; q = 0.6，en; q = 0.4'-H'用户代理：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_10_1）AppleWebKit / 537.36（KHTML，像Gecko）Chrome / 39.0.2171.95 Safari / 537.36'-H'接受： / '-H'参考者：http://angulair.rohanchhabra.in/'-H'连接：keep-alive'-H'访问-Control-Request-Headers：accept，content-type'-v
Firefox：200 OK curl'http://angulairapi.rohanchhabra.in/auth'-X OPTIONS -H'Access-Control-Request-Method：POST'-H'原产地：http://angulair.rohanchhabra.in'-H'接受编码：gzip，deflate，sdch'-H 'Accept-Language：ru-RU，ru; q = 0.8，en-US; q = 0.6，en; q = 0.4'-H'User-Agent：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_10_1）AppleWebKit / 537.36（KHTML，和Gecko一样）Chrome / 39.0.2171.95 Safari / 537.36'-H'接受： / '-H'参考者：http://angulair.rohanchhabra.in/'-H'连接：keep-alive' -H'Access-Control-Request-Headers：content-type'-v

Answer 5

在Laravel中，尝试设置：'Access-Control-Allow-Methods'＆amp; 'Access-Control-Allow-Headers'至'*'

public function handle($request, Closure $next)
 { 

   header("Access-Control-Allow-Origin: *");

  // ALLOW OPTIONS METHOD
  $headers = [
         'Access-Control-Allow-Methods'=> '*',
         'Access-Control-Allow-Headers'=> '*'
     ];
  if($request->getMethod() == "OPTIONS") {
         // The client-side application can set only headers allowed in Access-Control-Allow-Headers
         return Response::make('OK', 200, $headers);
     }

     $response = $next($request);
     foreach($headers as $key => $value) 
      $response->header($key, $value);
  return $response;
 }

AngularJS的预检OPTIONS请求不能与Chrome一起使用？

5 个答案: