Django后端和Angular Frontend发送请求到后端

Question

你好，我已经完成了学习angular 7 基础知识，已经从背面和Angular组合了DJANGO，从我开始的时候，我是这个项目的开始

现在，我正在为Django使用rest_framework，并且我希望Angular向后端发送GET请求，因为我们知道Django使用127.0.0.1:8000和Angular 127.0.0.1:4200，当我执行此功能时

export class HomeComponent implements OnInit {
  users: Object;
  recvedData: boolean = false;
  hasError: boolean = false;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.http.get('/api/qutes').subscribe(data => {
      this.users = data;
      console.log(data);
    }, error => {
      this.recvedData = true;
      this.hasError = true;
      console.log(error);
   })
 }
}

我正在尝试从/api/quets获取来自后端服务器的数据 但是它请求来自前端服务器（127.0.0.1:4200/api/quets）的数据，并且此URL不存在，我知道我可以添加带有可变domain = "127.0.0.1:8000"的service，并将其添加到this.http.get(this.service.domain +"/api/quets")我的问题：

有更好的方法可以做到吗？因此，它将所有请求自动发送到backend服务器？

Answer 1

如果设置了代理，则可以将URL写为/api，http://localhost:4200/api的所有调用都将转移到http://localhost:3000/api。

来自Angular Docs：

您可以使用WebPack Dev服务器中的代理支持将某些URL转移到后端服务器，通过将文件传递到--proxy-config构建选项。例如，要将http://localhost:4200/api的所有调用转移到在http://localhost:3000/api上运行的服务器，请采取以下步骤。

文档中提到的步骤是：

在 src/文件夹中创建文件proxy.conf.json，旁边是package.json。

将以下内容添加到新的代理文件：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

在CLI配置文件中，angular.json，将proxyConfig选项添加到服务目标：

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

要使用此代理配置运行开发服务器，请致电ng serve。

您可以编辑代理配置文件以添加配置选项；文档中给出了一些示例。有关所有选项的描述，请参见WebPack DevServer文档。

请注意，如果您编辑代理配置文件，则必须重新启动ng serve进程才能使您的更改有效。