I'm having a problem making requests to my own back. I can't run them on the same port.
My back runs on port 3000 and my front runs on port 8080. I want to make an HTTP POST request. The service tries to pass an email, looks it up in a database, encrypts it and sends it to me.
I have a in the project root a proxy.conf.json
with the following information.
{
"/api/*":{
"target": "http://localhost:3000",
"secure": false,
"logLevel": "debug"
}
}
And in turn, I run the server with a npm start
configured as follows in the package.json
:
"scripts": {
...
"start": "ng serve --proxy-config proxy.conf.json",
...
}
With that. When running the server, the CORS error stopped appearing. But when the request is made I get the following error:
POST http://localhost:8080/login 404 (Not Found)
And also:
HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: 'Not Found', url: 'http://localhost:8080/login', ok: false, …}
error: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /login</pre>\n</body>\n</html>\n"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:8080/login: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:8080/login"
My request in Angular is done as follows (data is hardcoded for testing purposes):
Before in the url it had: "http://localhost:3000/login" but I changed it when making the proxy
async getToken(email:string){
return await this.http.post<any>("/login", '{username: "[email protected]"}');
//We deliver the token
}
In postman the request does work:
The problem was that he
proxy.conf.json
was misstated. The file content was:But the url does NOT contain /api/* The login url is not as such "http://localhost:3000/api/login"
Therefore I changed it to the following and it worked: