2016-05-04 5 views
2

私は、AngularJSフロントエンドとLaravelバックエンドを持つWebアプリケーションを開発し始めています。この段階で私はXAMP htdocsに2つのディレクトリを持っています.1つはローカルホストのポート9000のgrunt組み込みサーバーによって提供されるAngularJSプロジェクト用であり、他のプロジェクトはlocalhostのpost 8051でXAMP Apache/PHPによって提供されるLaravelです。テストURLとして使用している外部インターネットからの他のLaravelアプリケーションと他のURLへの$ httpリクエスト - 明らかにこれはサイト間のセキュリティ保護によるものです。AngularJSとPHP用に異なるサーバーはありますか?

それは私に質問につながります - フロントエンド/バックエンドアプリケーション用に2つのサーバー(または、異なるポートを持つ少なくとも1つのサーバー - 各ポートは異なるサーバーによって提供されます)?私はこれがJSONP要求に置き換えられるべきGET要求のために可能であることを知っています。しかし、他のHTTP動詞はどうでしょうか?PUT、DELETEなどの要求を他のサーバーまたは同じサーバー/アプリケーションの他のポートに行うことができる$ httpメソッドがありますか?

または、唯一の可能性は、同じアプリケーションの同じサーバー/ポートでフロントエンドとバックエンドの両方を実行することです。つまり、私はAngularJSをPHPやJavaアプリケーションの一部としてホストする必要があります。

最初の問題は、有名なAngular JS http status -1エラーから発生します。私は密接にチュートリアルhttp://www.tutorials.kode-blog.com/laravel-5-angularjs-tutorialと私のコードを以下に示しています:

return $http({ 
    method: 'GET', //'JSONP', 
    url: 'http://localhost:8081/testserver/server.php/api/v1/contracts', 
    //url: 'http://jsonplaceholder.typicode.com/posts', 
    timeout: 100000 
    }).then(function(result) { 
     alert(result); 
     return result.data; 
    }, 
    function (error) { 
     alert(error); 
     console.log("v2 my object: %o", error); 
     alert(JSON.stringify(error)); 
    } 
); 

私はローカルホストへのリクエストを行うと、-1のエラーが存在するが、http://jsonplaceholder.typicode.com/postsに私の要求が予想される答えを与えます。 localhostではなく外部IPアドレスを使用しようとしましたが、エラーはまだありました。私のサーバー側のコードは明らかにLaravelを照らし使用しています - 私は推測、>取得()関数を、契約の配列を変換するために必要なすべての変換は、JSONレスポンスにオブジェクトん:

public function index($id = null) { 
    if ($id == null) { 
     //this branch is being tested 
     return Contract::orderBy('CONTRACT_NO', 'asc')->get(); 
    } else { 
     return $this->show($id); 
    } 
} 

サーバーの応答については何も例外ではありません -

[{"CONTRACT_NO":"1","CUSTOMER":null,...}] 
+1

は –

+0

私の最初の問題は、AngularJS HTTPステータス-1有名な問題である要求します。私はそれがCORSに接続されていると思っていましたが、私のAngularはhttp:// localhost:9000 /#/ contractsで動作していて、 'url:' http://jsonplaceholder.typicode.com/posts ' localhost Laravelサービスに対してhttpステータス-1がスローされます。私はこれがCORSかどうか分かりません – TomR

+1

リクエストのクライアント側をどのようにしているかを示すコードを投稿し、それをサーバ側でどのように処理しようとしていますか? –

答えて

1

私はCORS要求を処理するために、次のMiddlewareを使用しています。同様のことがなければ、Laravelバックエンドに対して行われたCORS要求をサポートすることはできません。

以下のようなものを試してみてください。これは現在、原産地の要求を許可するように設定されています。生産中は、既知のソースからのリクエストのみを許可するようにしてください。

<?php 

namespace App\Http\Middleware; 

use Closure; 
use Response; 

class CorsMiddleware { 

    /** 
    * Handle an incoming request. 
    * 
    * @param \Illuminate\Http\Request $request 
    * @param \Closure $next 
    * @return mixed 
    */ 
    public function handle($request, Closure $next) 
    { 
     // setup array of CORS headers 
     $headers = [ 
      'Access-Control-Allow-Origin' => '*', 
      'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE', 
      'Access-Control-Allow-Headers' => 'Content-Type, Accept, Origin, Authorization, X-Requested-With', 
      'Access-Control-Allow-Credentials' => true, 
      'Access-Control-Expose-Headers' => 'Authorization', 
     ]; 

     // check for OPTIONS request 
     if($request -> getMethod() == 'OPTIONS') 
     { 
      return Response::make('OK', 200, $headers); 
     } 

     // add CORS headers to remaining requests 
     $response = $next($request); 
     foreach($headers as $key => $value) 
     { 
      $response -> headers -> set($key, $value); 
     } 

     return $response; 
    } 

} 

また、LaravelにCORSのサポートを追加するため、このパッケージで見ることができる:https://github.com/barryvdh/laravel-corsあなたはCORSを見てする必要があります

+0

それはそれでした!これが適切な解決策でした。ミドルウェアはapp/Http/Kernel.phpに登録する必要があります – TomR

1

Apacheサーバーに仮想ホストを構成することは可能です。差別化は、異なるドメイン名(またはサブドメイン)、IPアドレス、またはポートを使用して行うことができます。ポート80と8080の

設定例:

Listen 80 
Listen 8080 

<VirtualHost 172.20.30.40:80> 
    ServerName www.example.com 
    DocumentRoot "/www/domain-80" 
</VirtualHost> 

<VirtualHost 172.20.30.40:8080> 
    ServerName www.example.com 
    DocumentRoot "/www/domain-8080" 
</VirtualHost> 
関連する問題