Configure a proxy for your API calls with Angular CLI
Why Stack Overflow recommends it
Stack Overflow users link it when answering CORS, preflight and dev-server port mismatch problems in Angular projects, because the proxy setup avoids the cross-origin error altogether.
Recommended by 4 people across 4 different months, 2017 to 2022.
What it is
A short screencast by Juri Strumpflohner showing how to set up the Angular CLI dev server to proxy API calls to a separate backend, for example frontend on localhost:4200 and API on localhost:3000. It walks through creating a proxy config file and starting ng serve with it, and is explicitly meant for development only.
What people said
Recommends etayluz · 2017-03 · Stack Overflow · on “Hooking up express.js with Angular CLI in dev environment”
NEW ANSWER My experience of 15 hours has taught me that trying to serve an Angular app with Express during development is NOT a good idea. The proper way is to run Angular and Express as two different apps on two different ports. Angular will be served on port 4200 and Express on port 3000 as usual. Then configure a proxy for API calls to Express app. Add proxy.config.json to root of Angular project: { "/api/*":{ "target":" [LINK] ", "secure":false, "logLevel":"debug" } } Open up a new terminal tab and run this command to start Express app: nodemon [YOUR_EXPRESS_APP.js] --watch server (YOUR_EXPRESS_APP.js is usually named server.js or app.js. server is a directory where you keep all your Exp
Recommends Nagaraj Jayaraman · 2017-12 · Stack Overflow · on “How to call nodeJS API from Angular CLI at localhost with different port?”
I am using Angular CLI latest version and nodeJS as well, both running in localhost as different project and different port number, Angular (4200) and NodeJS (8088), added proxy settings in angular following this video ( [this video] ), then run command npm start . [LINK] now listens my nodeJs port number and getting response in error block. [LINK] When I run [LINK] in browser, getting response on the screen. example : {"message":"session expired"} app.component.js import { Component,Inject } from '@angular/core'; import { Http, Response } from '@angular/http'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { HeroFormComponent } from './her
Recommends Jojoseph · 2018-10 · Stack Overflow · on “Http status is not OK: modify headers”
Developing for the first time an angular 6 project after several projects in AngularJS I encounter a CORS problem (at least that's what I think..) What I want and always did is to retrieve my data from a mysql server. I know, Angular cannot talk directly with Mysql. Therefor I use this php API: [LINK] I have success with http.get() but not with http.post(). The console throws an error: a 404 error and the message: Response for preflight does not have HTTP ok status. Reading all the answers here on Stackoverflow I think it has something to do with modifying headers. So I added headers to my post request as you can see in my code. No result however. My project is running on localhost:4200 and
Recommends M. Akbar Zain · 2022-07 · Stack Overflow · on “Does not have http ok status error in angular with webapi”
This video saved my day - Proxying the API call so that, Angular try to connect through this proxy. Step 1: Create a file in your project as "proxy.config.json" without double quotes. Step 2: Put below code in it and save... { "/api/*":{ "target": " [LINK] ", "secure":"false", "logLevel":"debug", "changeOrigin":false } } Note: you must put your Back End url. Step 3: In the "package.json" file, do the below amendment in "start" tag's value only. { "name": "front-end", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.config.json", ...... }, here is the Youtube link which might be in older version of Angular for your reference. Proxying API call from Angular
Cites etayluz · 2017-03 · Stack Overflow · on “Angular 2: Response to preflight request doesn't pass access control check”
I found a solution that I liked using a proxy server here: Configure a proxy for your API calls with Angular CLI [this video]