django backend and angular frontend send request to backend

Question

hello I have finished learn angular 7 basics now have combined django from the back and angular for the from I am in the start of this project

now I am using rest_framework for django and I want angular to send a GET request to the backend as we know django uses 127.0.0.1:8000 and angular 127.0.0.1:4200 and when I do this function

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);
   })
 }
}

I am trying to get data from /api/quets from the backend server but it requesting the data from the frontend server (127.0.0.1:4200/api/quets) and this URL does not exists I know I can add a service with variable domain = "127.0.0.1:8000" and to this.http.get(this.service.domain +"/api/quets") my question:

there is a better way to do that? so it send all of the request to the backend server automatically?

that can write this.http.get("api/quotes") and not this.http.get("127.0.0.1:8000/api/quotes") — dsal3389
– dsal3389, Commented Feb 25, 2019 at 16:37
unless api itself contains 127.0.0.1:8000/api/, else , you cannot AFAIN. — SeleM
– SeleM, Commented Feb 25, 2019 at 16:39

mehamasum · Accepted Answer · 2019-02-25 16:57:37Z

If you setup a proxy, you can just write the urls as /api, all calls of http://localhost:4200/api will be diverted to http://localhost:3000/api.

From angular docs:

You can use the proxying support in the webpack dev server to divert certain URLs to a backend server, by passing a file to the --proxy-config build option. For example, to divert all calls for http://localhost:4200/api to a server running on http://localhost:3000/api, take the following steps.

The steps mentioned in docs are:

Create a file proxy.conf.json in the projects src/ folder, next to package.json.

Add the following content to the new proxy file:

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

In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

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

To run the dev server with this proxy configuration, call ng serve.

You can edit the proxy configuration file to add configuration options; some examples are given in the docs. For a description of all options, see webpack DevServer documentation.

Note that if you edit the proxy configuration file, you must relaunch the ng serve process to make your changes effective.

Collectives™ on Stack Overflow

django backend and angular frontend send request to backend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related