fetch data from different localhost in Angular

Question

in Angular, ng serve --port 4200 --host 0.0.0.0 creates an instance of http server. I've been told, that in order to fetch data from server side scripts in Angular, another localhost is needed.

In ngOnInit I fetch the data:

  ngOnInit(){
    this.http.get('http://localhost/echo.php').subscribe(data => {
      console.log(data);      
    });
  }

This fetch has a status code 200 in Network tab of Developer tools but I am getting a CORS error in the console:

Failed to load http://localhost/echo.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

It appears that differenr ports cause this. What should I do to prevent that? Browser itself has no issue by fetching this file, it is Angular that complains.

UPDATE: I've followed the suggestions and came up with a new error. this time it is: GET http://localhost:4200/backend/echo.php 504 (Gateway Timeout)

the "other" server is configured to listen to port 80 with DocumentRoot being backend ..

proxy.conf.json:

{
  "/backend/*": {
    "target": "http://localhost:80",
    "secure": false,
    "logLevel": "debug"
  }
}

.ts:

  ngOnInit(){
    this.http.get('http://localhost:4200/backend/echo.php').subscribe(data => {
      console.log(data);      
    });
  }

file structure:

Possible duplicate of [XMLHttpRequest cannot load https://www.\[website\].com/](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-https-www-website-com) — Quentin, Dec 02 '17 at 13:26
It has nothing to do with Angular. This is a core feature of the browser's JavaScript security. — Quentin, Dec 02 '17 at 13:26
@Quentin I think it can be related with Angular. https://angular.io/api/platform-browser/DomSanitizer . — Pac0, Dec 02 '17 at 13:37
@Pac0 — It is related to Angular only in so far as Angular is written in JavaScript. That URL doesn't appear to have anything to do with the problem. — Quentin, Dec 02 '17 at 17:30
i tried this to see if it will work. but it does not. if you are using WAMP, you can use Directory tag in apache's httpd.conf if your URL files are in a folder, or LocationMatch if it is another domain. I use that technique to be able to run from angular. — chitgoks, Jan 03 '18 at 06:27

score 4 · Accepted Answer · answered Dec 02 '17 at 13:31

4

You can proxy your application on http://localhost by creating a file called proxy.conf.json in your angular project with the following content:

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

and then starting ng serve with the additional parameter --proxy-config proxy.conf.json

ng serve --port 4200 --host 0.0.0.0 --proxy-config proxy.conf.json

You have to change your call then to include the port and /api prefix:

this.http.get('http://localhost:4200/api/echo.php').subscribe(data => {
...

You can find more details here

answered Dec 02 '17 at 13:31

Harald Gliebe

7,236
3
33
38

1

You can look at https://github.com/HackPoint/ng-apps my repository I do it the same way – hackp0int Dec 02 '17 at 13:36
thanks. Now I am getting 504 (Gateway Timeout) error in the console and network tab :) – sanjihan Dec 02 '17 at 14:57
1

The final probelm was that `http://localhost` needes to be replaced with `http://127.0.0.1`. After that, this solution works. – sanjihan Jan 03 '18 at 09:03

Sina Lotfi · Answer 2 · 2017-12-02T21:49:23.303

If you have Tow loalhost application, first is Angular app and is running in http://localhost:4200 and another is API project and running in http://localhost:3000, In this situation if from your angular app make request to another, you get CORS error, for solving this problem you can use below instructions step by step:

Make a file and name it proxy.config.json inside main folder of Angular project like below image:

Then put codes inside created file like this (please notice to target part):

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

Then Change package.josn file and insert code like below image"

And after all you must use npm start to running anglar project

Note: If you don't do it for angular project, you will occure with CORS problem.

fetch data from different localhost in Angular

2 Answers2

Linked