Localhost request from angular

angular 6 http get example
localhost:4200 angular
angular http get with body
angular 6 rest api example
angular https request
localhost:4200 refused to connect
angular 2 http get example
angular httpparams example

Hello i have created a mini endpoint in Flask in python, and it's working well. When i access it from Postman :

http://127.0.0.1:5000/retrieve_data

it retrieves the data as a json. But when i call the endpoint from angular:

export class HomeComponent implements OnInit {
  title = 'angular-demo';
  data = this.getAnnounce();

  getAnnounce() {
    return this.http.get('http://127.0.0.1:5000/retrieve_data');
  }

  constructor(private http: HttpClient) {

  }

The actual result is:

    {
        "_isScalar": false,
        "source": {
            "_isScalar": false,
            "source": {
                "_isScalar": false,
                "source": {
                    "_isScalar": true,
                    "value": {
                        "url": "http://127.0.0.1:5000/retrieve_data",
                        "body": null,
                        "reportProgress": false,
                        "withCredentials": false,
                        "responseType": "json",
                        "method": "GET",
                        "headers": {
                            "normalizedNames": {},
                            "lazyUp
Canceldate": null,
                            "headers": {}
                        },
                        "params": {
                            "updates": null,
                            "cloneFrom": null,
                            "encoder": {},
                            "map": null
                        },
                        "urlWithParams": "http://127.0.0.1:5000/retrieve_data"
                    }
                },
                "operator": {
                    "concurrent": 1
                }
            },
            "operator": {}
        },
        "operator": {}
    }

PS: i am very noob at anuglar

From the document of angular's http client, the return value's type of http.get() is Observable

So if you want to get the data that you server respond, you must subscribe as this:

data = {};

getAnnounce() {
    this.http.get('http://127.0.0.1:5000/retrieve_data')
        .subscribe(result => this.data = result);
}

Angular HTTP Client - QuickStart Guide, If we want to add custom HTTP Headers to our HTTP request, statusText: "Not Found", url: "http://localhost:4200/api/simulate-error", ok: false,  If you try to make a request from your Angular app to localhost:8080, your browser will block you as it’s effectively trying to access a separate host. You could enable CORS on your server to explicitly enable access from different origins - but this is not something you want to turn on just to get a working dev environment.

You have to subscribe to your getAnnounce function.

For instance, you can try:

data = this.getAnnounce().subscribe();

Or directly on your constructor / ngOnInit:

ngOnInit() {
   this.getAnnounce().subscribe(
     data => this.data = data
   );
}

Can I make AngularJS HTTP calls to my server on localhost?, Yes you can make a http request to your server which you have hosted locally. Assuming both of the thing the local server and the angularJS thing are on the  I want to create an angular.io application, but the rest API shall be delivered from a different server port. Angular content from localhost:4200, the data from a node express server started independently on localhost:3000. But when I inject and use 'http', how can I configure the port to be used?

Great question, and as some others have suggested it would seem that you're missing a .subscribe() on your getAnnounce() method. Angular Docs has a guide on observables that can help you get a better understanding.

I have a few more suggestions for improving your experience with angular. Take advantage of services for grouping together similar functionality. For example, in your provided code, you could move your getAnnounce() to a new service you create; something like AnnouncementService. Then you can use this in many places of your code. it also helps test it and find bugs later on since your code is more separated.

Another thing you can do is to move your server api address to the environment variables. By default if you built your angular project using the Angular CLI you'll find in our src folder an environments folder with two files by default environment.ts and environment.prod.ts. you can access this JSON object anywhere within your .ts files and when you build your code for product vs locally it can change values to what ever you set. In your case you would put your local API address in there http://127.0.0.1:5000.

export const environment = {
  production: false,
  api: 'http://127.0.0.1:5000'
};

Now you can access this easily and have one spot to change if you ever change your port number or have your api in a real server.

import { environment } from './environments/environment';

/* remember to import the non prod version of the environment file, angular knows how to switch them automatically when building for production or not. */

Hopefully this helps you with your coding, good luck!

The best ways to connect to the server using Angular CLI, Therefore, the requests to the API server are cross-domain, and, that all requests that start with api/ will be resent to http://localhost:3000  To fetch data in Angular, we can use Observables with http to fetch data. An angular application will use http via a GET request to fetch data from a back-end server. The back-end could be powered by any number of server-side technologies such as Java, PHP, Python, or even server-side JavaScript in the form of Node.js.

Angular, angular. I want to access different devices web server depending on user by user i create the http request - for example if user provide ip addre… CORS exists to prevent 1 client-side page on domain A (localhost) from  But, there is one strange thing which I noticed, When I run Fiddler first and then when I run Web API and Angular app all the OPTIONS request is handled in PreflightRequestMiddleware. But when I am running without Fiddler the request is not even reaching to PreflightRequestMiddleware. I have spent 4 days but still has no idea what is wrong.

ng serve, Host to listen on. Default: localhost. --liveReload=true|false. Whether to reload the page on change, using  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more How to make post request from angular to node server

HttpErrorResponse, A response that represents an error or failure, either from a non-successful HTTP status, an error while executing the request, or some other failure which  Angular CLI provides a development server that runs on localhost:4200 by default so if you are using a back-end server that runs on a different domain, you may have CORS issues if your server is not configured properly. Even if your backend is running on localhost, it will be listenning on a different port, which is treated as a different domain.

Comments
  • which http client do you use? please show the import
  • I believe doing this data = this.getAnnounce().subscribe(); would set data to subscription not the data return. This is how you can store a reference of something subscribed to be able to unsubscribe later on. rxjs-dev.firebaseapp.com/guide/subscription for more information on subscriptions :)