Use a Proxy with the Angular CLI to Fix CORS Development Problems

Angular

Share this video with your friends

When we first try to use a local server for our data in development, we get a rude error in the console and nothing works. What is that and why are we getting it? Well, even though both the server and the client will eventually be on the same domain in production, we're getting CORS (cross-origin resource sharing) errors in development. That's because we're running the server and the client on different ports. We can fix this by setting up the Angular CLI to proxy all requests to the API for us so they appear to be coming from the same origin.

Igor

~ 4 years ago

"I've added a simple Express server for the habits."

What does this mean? How do I do this?

Sam Julien(instructor)

~ 4 years ago

Hi Igor,

"I've added a simple Express server for the habits." What does this mean? How do I do this?

I moved the habits from just hard-coded in a service to a small Express server in order to demonstrate a CORS error. It’s not a step for you to have to repeat, it was just setup for this lesson since CORS errors happen when the client and API are not on the same server. You can see the code for the server here:

https://github.com/samjulien/egghead-angular/blob/master/server/server.js

Hope that helps!

Igor

~ 4 years ago

Hello Sam,

Thanks for the quick response!

I did not get about which server you were talking about before. Now it works for me :)

Cheers!