how to configure production url | Angular Community | Page 1

glass nest Nov 28, 2022, 3:26 AM

#

I am looking to deploy my angular project. I currently tell it which api url to hit through a proxy.config.json { "/api/*": { "target": "http://localhost:3000", "secure": false }, "/__/*": { "target": "http://localhost:3100", "secure": false } }and i start up my app with ng serve --proxy-config proxy.config.json what do i need to do to make it point to my deployed API for when i deploy my application. i.e locally i want it to hit localhost but deployed i want it to hit my production api url.

lone shale Nov 28, 2022, 3:26 AM

#

Generally you do that using environment.ts and enviornment.prod.ts

glass nest Nov 28, 2022, 3:30 AM

#

what do i need to do for example, environment.ts to tell it to hit localhost:3000?

lone shale Nov 28, 2022, 3:37 AM

#

https://angular.io/guide/build#configure-environment-specific-defaults

glass nest Nov 28, 2022, 3:48 AM

#

i see, and when starting the app how will it know what environment im in?

#

just got it to work

#

though im running into this Access to XMLHttpRequest at 'http://localhost:3000/api/auth/login' from origin 'http://localhost:4200' has been blocked by CORS policy: which i wasnt before

lone shale Nov 28, 2022, 3:53 AM

#

--configuration flag. The default for ng build is "production" as defined in angular.json

#

Sounds like you have your configurations backwards

glass nest Nov 28, 2022, 3:54 AM

#

localhost 4200 is the frontend, and 3000 is the backend

lone shale Nov 28, 2022, 3:55 AM

#

What did you do?

glass nest Nov 28, 2022, 3:56 AM

#

i was using proxy.config.json before so i wasnt running into issues

#

i just spun it up with ng serve

#

and i am seeing this cors issue

lone shale Nov 28, 2022, 4:02 AM

#

You still need the proxy with localhost. Or better fix your API server to do CORS

glass nest Nov 28, 2022, 4:02 AM

#

im trying to the latter actually now

#

what are cors and why are they asking me for it?

#

is it to check the integrity of the request i.e where its coming from?

lone shale Nov 28, 2022, 4:03 AM

#

You understand that ng serve is not for production, right?

glass nest Nov 28, 2022, 4:03 AM

#

yes

lone shale Nov 28, 2022, 4:03 AM

#

g!cors @glass nest

mossy muralBOT Nov 28, 2022, 4:03 AM

#

@glass nest CORS is not an Angular specific issue. You will need to configure your API server to be able to accept cross-origin requests.

For development environment only
In case you do not have access to the API server, you can set up a proxy through which Angular will send requests: https://angular.io/guide/build#proxying-to-a-backend-server.

See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more information about this subject.

#how to configure production url