Question

您好，我已经完成学习angular 7 现在的基础知识，在项目开始时就将django从背面和角度进行了组合

现在我正在将rest_framework用于django，并且我希望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不存在，我知道我可以向变量service添加domain = "127.0.0.1:8000"并向{ {1}} 我的问题：

还有更好的方法吗？以便将所有请求自动发送到this.http.get(this.service.domain +"/api/quets")服务器？

Answer 1

如果您设置代理，则只需将网址写为/api，所有http://localhost:4200/api的调用都会转移到http://localhost:3000/api。

From angular docs：

通过将文件传递到--proxy-config构建选项，您可以使用webpack开发服务器中的proxying support将某些URL转移到后端服务器。例如，要将所有对http://localhost:4200/api的呼叫转移到运行在http://localhost:3000/api上的服务器，请执行以下步骤。

文档中提到的步骤是：

在proxy.conf.json旁边的项目src/文件夹中创建文件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流程以使更改生效。

django后端和有角度的前端向后端发送请求

1 个答案: