6

I've seen other similar issues here on Stack Overflow but so far nothings quite done anything for me yet.

I have an angular app serving to http://localhost:4200. I have a backend at http://localhost:8080/myApp/

I'm trying to set reach the backend from my frontend with the following call:

public getPeople(): Observable<PeopleModel[]> {
    return this.http
        .post(API_URL + '/getPeopleDetails', {})
        .map(response => {
            const people = response.json();
            console.log(people);
            return partners.map((people) => new PeopleModel(people));
        })
        .catch(this.handleError);
}

the API_URL is set to http://localhost:8080/myApp

My proxy config looks like the following:

{
    "/myApp/*": {
        "target": "http://localhost:8080/myApp",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite" : {"^/myApp" : "http://localhost:8080/myApp"}
    }
}

My package.json has the following:

"start": "ng serve --proxy-conf proxy.conf.json",

The error I'm receiving when trying to run the app is a CORS one and a 403.

Failed to load http://localhost:8080/myApp/getPeopleDetails: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

I'd appreciate any help. Thanks!

RunFranks525
  • 163
  • 1
  • 2
  • 14

3 Answers3

3

At the root of your application parallel to package.json file, create a new file
proxy.config.json 

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

Now in your package.json in scripts: {}, add the following flax with file name proxy.config.json to start" 

{
"name":"xyz",
"version":"1.0.0",
"license":"MIT",
"angular-cli": {},
"scripts": {
    "start":"ng serve --proxy-config proxy.config.json",
    "test":"ng test"
}

}

Hope this works for you.

Aditya Shukla
  • 316
  • 1
  • 3
  • 20
  • Unfortunately, I already have all of this so it doesn't really help with trying to get the proxy to work. – RunFranks525 Nov 28 '17 at 17:12
  • Are you behind a corporate firewall in any case? – Aditya Shukla Nov 28 '17 at 17:24
  • Give me time till tomorrow, I too dealt with this long back. Let me have a look at my configs, ll get back to you. – Aditya Shukla Nov 28 '17 at 18:22
  • @RunFranks525 I just checked. I have just got a file at the root .typingsrc and have as { "rejectUnauthorized": false, "registryURL": "https://api.typings.org", "httpProxy": "http proxy", "httpsProxy": "https proxy", } This works for me. Also put the proxy in .npmrc file. – Aditya Shukla Nov 29 '17 at 08:17
0

It looks like the issue is that the option should be "--proxy-config", not "--proxy-conf" in "start": "ng serve --proxy-conf proxy.conf.json"

classact
  • 51
  • 4
0

You may need to pass backend url without "api". Following another tip on proxy.conf.json:

{
  "/api/*": {
    "target":"http://localhost:3000",
    "pathRewrite": {
      "^/api": "/myApp"
    },
    "secure":false
  }
}

https://angular.io/guide/build#proxying-to-a-backend-server

gleitonfranco
  • 791
  • 6
  • 9