2014-12-21 22 views
4

我想構建一個簡單的Angular應用程序。我在Laravel創建了一個API,它只有兩條簡單的路線,用於發送機場和航班的json數據。我已經由服務配置我的角度應用獲取數據,像這樣:無法在Laravel API中啓用CORS?

services.js

angular.module('airlineServices', ['ngResource']) 
    .factory('Airport', function($resource){ 
     return $resource("http://angulair.rohanchhabra.in/airports/:id", {}, { 
      query: { method: "GET", isArray: false } 
     }); 
    }); 

現在,當我使用的資源作爲放置在角目錄本身簡單的JSON文件,有用。但是,當我試圖從我的服務在上面的代碼中獲取從Laravel API的數據,我看到一個錯誤,其中說控制檯:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://angulair.rohanchhabra.in/airports. This can be fixed by moving the resource to the same domain or enabling CORS. 

我已經安裝了一個包https://github.com/barryvdh/laravel-cors這是爲了使CORS。配置文件看起來像這樣:

<?php 

return array(

    /* 
    |-------------------------------------------------------------------------- 
    | Laravel CORS Defaults 
    |-------------------------------------------------------------------------- 
    | 
    | The defaults are the default values applied to all the paths that match, 
    | unless overridden in a specific URL configuration. 
    | If you want them to apply to everything, you must define a path with *. 
    | 
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*') 
    | to accept any value, the allowed methods however have to be explicitly listed. 
    | 
    */ 
    'defaults' => array(
     'supportsCredentials' => false, 
     'allowedOrigins' => array('*'), 
     'allowedHeaders' => array('*'), 
     'allowedMethods' => array('*'), 
     'exposedHeaders' => array(), 
     'maxAge' => 0, 
     'hosts' => array(), 
    ), 

    'paths' => array(
     'api/*' => array(
      'allowedOrigins' => array('*'), 
      'allowedHeaders' => array('*'), 
      'allowedMethods' => array('*'), 
      'maxAge' => 3600, 
     ), 
     '*' => array(
      'allowedOrigins' => array('*'), 
      'allowedHeaders' => array('Content-Type'), 
      'allowedMethods' => array('POST', 'PUT', 'GET', 'DELETE'), 
      'maxAge' => 3600, 
      'hosts' => array('api.*'), 
     ), 
    ), 

); 

我甚至想在App添加代碼:()之後,在filters.php像這樣:

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

即使這並沒有幫助。所以我繼續嘗試編輯.htaccess文件,如下所示:

Header set Access-Control-Allow-Origin "*" 

我仍然收到相同的錯誤。

如果我所提到的沒有幫助的代碼,我做了兩個倉庫公衆,讓大家可以看看:

Laravel API

Angular Application

我在做什麼錯?如何啓用CORS,以便我可以從任何遠程應用程序使用API​​?

回答

3

您的ngResource網址需要更改。這應該工作:

return $resource("http://angulairapi.rohanchhabra.in/airports", {}, { 
    query: { method: "GET", isArray: false } 
}); 

您需要ngResource URL需要允許的選項首部被改變。見https://laracasts.com/discuss/channels/requests/laravel-5-cors-headers-with-filters

報價從頁面這應該工作:

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

    ifreturn $resource(Request:"http:getMethod() == "OPTIONS") { 
     // The client-side application can set only headers allowed angulairapi.rohanchhabra.in Access-Control-Allow-Headers 
     $headers = [ 
      'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE', 
      'Access-Control-Allow-Headers'=> 'X-Requested-With, Content-Type, X-Auth-Token/airports", Origin{}, Authorization' 
     ];{ 
     return Response:query:make('You are connected to the{ API',method: 200"GET", $headers); 
    isArray: false } 
}); 

我沒有用laravel-CORS自己,但或者,你可能會想嘗試和選項添加到您的路徑:

'*' => array(
    'allowedOrigins' => array('*'), 
    'allowedHeaders' => array('Content-Type'), 
    'allowedMethods' => array('POST', 'PUT', 'GET', 'DELETE', 'OPTIONS'), 
    'maxAge' => 3600, 
    'hosts' => array('api.*'), 
), 

+0

儘管我不理解代碼,但我已經按照您的建議更新了App :: before。仍然沒有運氣。 – Rohan

+0

Angular ngResource在發送GET/POST/PUT/DELETE之前發送OPTIONS請求。這是客戶知道什麼HTTP方法被允許的一種方式。 你可以拉起一個REST客戶端,並檢查你是否在響應中獲得了'Access-Control-Allow-Origin'頭部? –

+0

哦,現在更有意義!但是,你現在建議我做什麼? – Rohan