CORS issue with proxy.conf.json in Angular App

Viewed 18002

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!

3 Answers

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"

Related