2016-05-06 6 views
0

イム使用してCORSパッケージを使用して別のポートに設定されている場合Restfull APIにのみ到達することができます:は2角度とLaravel -</p> <pre><code>Route::group(['prefix' => 'api', 'middleware' => ['cors']], function(){ Route::resource('courses', 'CourseController', ['except' => [ 'create', 'edit' ]]); }); </code></pre> <p>マイリソースコントローラを次のようにファイルがあるlaravel私のルートの職人

<?php 

    namespace App\Http\Controllers; 

    use App\Course; 
    use App\Http\Requests; 
    use App\Http\Requests\CourseForm; 


    class CourseController extends Controller 
    { 
     /** 
     * Display a listing of the resource. 
     * 
     * @return \Illuminate\Http\Response 
     */ 
     public function index() 
     { 
      $courses = Course::all(); 
      return response()->json(['courses' => $courses]); 
     } 

     /** 
     * @param CourseForm $request 
     * @return \Illuminate\Http\JsonResponse 
     */ 
     public function store(CourseForm $request) 
     { 
       $course = new Course(); 
       $course->author = $request->input('author'); 
       $course->name = $request->input('name'); 
       $course->description = $request->input('description'); 
       $course->price = $request->input('price'); 
       $course->save(); 
       return response()->json(['message' => 'Course saved']); 

     } 

     /** 
     * Display the specified resource. 
     * 
     * @param int $id 
     * @return \Illuminate\Http\Response 
     */ 
     public function show($id) 
     { 
      $course = Course::find($id); 
      return response()->json(['course' => $course]); 
     } 

     /** 
     * Update the specified resource in storage. 
     * 
     * @param \Illuminate\Http\Request $request 
     * @param int $id 
     * @return \Illuminate\Http\Response 
     */ 
     public function update(CourseForm $request, $id) 
     { 
      if($request->ajax()) 
      { 
       $course = Course::find($id); 
       $course->author = $request->input('author'); 
       $course->name = $request->input('name'); 
       $course->description = $request->input('description'); 
       $course->price = $request->input('price'); 
       $course->save(); 
       return response()->json(['message' => 'Course updated']); 
      } 
     } 

     /** 
     * Remove the specified resource from storage. 
     * 
     * @param int $id 
     * @return \Illuminate\Http\Response 
     */ 
     public function destroy($id) 
     { 
      $course = Course::find($id); 
      $course->delete(); 
      return response()->json(['message' => 'Course removed']); 
     } 
    } 

と私の角度サービスは次のとおりです。

import {Http, Headers, Response} from "@angular/http" 
    import {Injectable} from "@angular/core" 
    import {ICourse} from "../interfaces/ICourse" 
    import 'rxjs/Rx'; 
    import {Observable} from 'rxjs/Observable'; 
    import {Observer} from 'rxjs/Observer'; 
    import 'rxjs/add/operator/share'; 
    import 'rxjs/add/operator/map'; 

    @Injectable() 
    export class Api { 
     // only works if I execute php artisan serve --host=www.test.io --port=8001 
     apiUrl: string = "http://www.test.io:2736/api/courses/"; 
     headers: Headers = new Headers; 
     courses$: Observable<ICourse[]>; 
     private _coursesObserver: Observer<ICourse[]>; 
     private _dataStore: { 
      courses: ICourse[] 
     }; 

     constructor(private _http: Http) { 
      this.headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
      this.headers.append('X-Requested-With', 'XMLHttpRequest'); 
      this.courses$ = new Observable<ICourse[]>(observer => this._coursesObserver = observer).share();   
      this._dataStore = { courses: [] }; 
     } 

     public createCourse(course) { 
      return new Promise((resolve, reject) => { 
       this._http.post(this.apiUrl, course, { 
        headers: this.headers 
       }).map((res: Response) => res.json()).subscribe(
         (res) => { 
          resolve(res); 
          console.log('api succeeds'); 
         }, 
         (error) => { 
          //alert('error'); 
          reject(error); 
         } 
        ); 
      }) 
     } 


    } 

私は働く、Mac上でMAMPを使用してWebアプリケーションを実行しています私は実行しない限り、罰金しかし、私のサービス/ APIのdoesntの仕事への投稿:ポート番号doesntのは、本当にそれは基本的には任意のポートが、80にする必要がありかまい

php artisan serve --host=www.test.io --port=8001 

..私は私の人生のためにカントなぜこれを理解は、MAMPでサイトを走らせているので、すべてのPHPは普通のようにgettngを実行し、すべてのHTTPリクエストをPORT 80で実行しなければなりませんが、3306にあるmysqlを除きますが、なぜ2つのサーバを同時に実行する必要がある(職人とマンパン)は、同じドメイン上でRESTfull API呼び出しを行うだけです。

答えて

0

AngularとLaravelが同じポートで実行されていないため、異なるポートでのみ接続する必要があります。

関連する問題

 関連する問題