CORS issue with proxy.conf.json in Angular App

Question

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!

What is your 'backend'?

dperish
– dperish

2017-11-28 16:35:26 +00:00
Commented Nov 28, 2017 at 16:35 — dperish
– dperish, Commented Nov 28, 2017 at 16:35
A spring boot app that has a several endpoints defined

RunFranks525
– RunFranks525

2017-11-28 17:00:41 +00:00
Commented Nov 28, 2017 at 17:00 — RunFranks525
– RunFranks525, Commented Nov 28, 2017 at 17:00

Aditya Shukla · Accepted Answer · 2017-11-28 17:08:04Z

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.

answered Nov 28, 2017 at 17:08

Aditya Shukla

3561 gold badge4 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RunFranks525 Over a year ago

Unfortunately, I already have all of this so it doesn't really help with trying to get the proxy to work.

Aditya Shukla Over a year ago

Are you behind a corporate firewall in any case?

Aditya Shukla Over a year ago

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 Over a year ago

@RunFranks525 I just checked. I have just got a file at the root .typingsrc and have as { "rejectUnauthorized": false, "registryURL": "api.typings.org", "httpProxy": "http proxy", "httpsProxy": "https proxy", } This works for me. Also put the proxy in .npmrc file.

classact · Accepted Answer · 2022-01-24 15:37:21Z

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"

answered Jan 24, 2022 at 15:37

classact

514 bronze badges

Comments

gleitonfranco · Accepted Answer · 2022-02-26 22:44:32Z

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

answered Feb 26, 2022 at 22:44

gleitonfranco

8097 silver badges9 bronze badges

Comments

FDK · Accepted Answer · 2024-12-11 13:24:51Z

0

I saw guys give you advice how to set up the proxy, actually in your case after setting up the proxy, please set your API_URL to be http://localhost:4200/api, it's the proxy who will turn it into http://localhost:8080/myApp, not you, that's why you got CORS problem again, because you've already set up the proxy but actually you haven't used it with a wrong API_URL,that's it. Good luck Bro!

answered Dec 11, 2024 at 13:24

FDK

1

1 Comment

Community Dec 13, 2024 at 6:23

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

CORS issue with proxy.conf.json in Angular App

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related