django 后端和角度前端向后端发送请求答案

【问题标题】：django backend and angular frontend send request to backenddjango 后端和角度前端向后端发送请求
【发布时间】：2019-07-19 02:51:02
【问题描述】：

你好，我已经完成了 angular 7 basics now 的学习，已经将 django 从后面和 Angular 结合起来，因为我在这个项目的开始阶段

现在我正在为 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 服务器？

【问题讨论】：

更好的方法比如什么？
可以写this.http.get("api/quotes")而不是this.http.get("127.0.0.1:8000/api/quotes")
除非api 本身包含127.0.0.1:8000/api/，否则你不能AFAIN。

标签： django angular django-rest-framework

【解决方案1】：

如果你设置了代理，你可以把url写成/api，所有http://localhost:4200/api的调用都会被转移到http://localhost:3000/api。

From angular docs:

您可以在 webpack 开发服务器中使用 proxying support 将某些 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。

您可以编辑代理配置文件以添加配置选项； docs 中给出了一些示例。有关所有选项的说明，请参阅webpack DevServer documentation。

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

【讨论】：