Angular on Rails API：HTTPリクエスト

Question

私はチュートリアルを行っていますが、表示する書籍のリストを取得するはずですが、「http://localhost:4200/api/books.json 404（見つかりません）」というコンソールエラーが表示されます。

私はlocalhostを訪問すれば：私のブラウザで3000/API/books.jsonを、私はシードされた情報を見ることができます。私のアプリはlocalhost：3000をしようとするべきか、それともlocalhost：4200を使用するはずですか？

アプリ/クライアント/ srcに/アプリ/ブックリスト/ブックリスト-component.ts

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    selector: 'app-book-list', 
    templateUrl: './book-list.component.html', 
    styleUrls: ['./book-list.component.css'] 
}) 
export class BookListComponent implements OnInit { 
    books: any; 

    constructor(private http: Http) { } 

    ngOnInit() { 
    this.http.get('/api/books.json') 
     .subscribe(response => this.books = response.json()); 
    } 

} 

アプリ/クライアント/ srcに/アプリ/ブックリスト/ブックリスト成分ここでは.htmlを

<p> 
    book-list works! 
</p> 
<ul> 
    <li *ngFor="let book of books">{{ book.name }}</li> 
</ul> 

は、セットアップを見てする必要があります場合は、コードベースの残りの部分である： https://github.com/theresaluu/tut-home-library-spike

Answer 1

URL全体を別のドメインに指定する必要がありますが、サーバー上でCORSを有効にする必要があります（CORSの詳細はこちらhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS）。 Angularはおそらく別のサーバーにあります（サーバーを起動すると仮定しています）。そのサーバーは静的ファイルをホストしています+ URL書き換え（HTML5角度戦略を使用している場合）、消費しているRESTサーバーは別のサーバーポート。

それは全体のURLを指定 this.http.get('http://localhost:3000/api/books.json')