Angular on Rails API：HTTP 请求

Question

我正在做一个教程，我应该得到一个要显示的书籍列表，但我收到一个控制台错误，说“http://localhost:4200/api/books.json404（未找到）”。

如果我在浏览器中访问 localhost:3000/api/books.json，我可以看到种子信息。我的应用程序应该尝试使用 localhost:3000 还是应该使用 localhost:4200？

app/client/src/app/book-list/book-list-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());
  }

}

app/client/src/app/book-list/book-list-component.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 在另一个域上，您应该指定整个 URL，但您还需要在服务器上启用 CORS（更多关于 CORS 的信息，请参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS）。 Angular 可能在另一台服务器上（我假设您使用 ng serve 启动它），并且该服务器正在托管静态文件 + URL 重写（如果您使用的是 HTML5 角度策略）并且您正在使用的 REST 服务器位于不同的服务器上港口。

应该是 this.http.get('http://localhost:3000/api/books.json')