Angular proxy not working when i call my rest service

Issue

I want ta call my rest api with proxy because of Cors error. But my proxy doesn't work any way. I took http://localhost:4200/api/users/login 401 (Unauthorized) error.

This is my proxy.config.json file.

{
  "/api/*": {
    "target": "https://xxx.herokuapp.com",
    "pathRewrite": {
      "^/api": ""
    },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

This is options which i add in angular.js;

"options": {
            "browserTarget": "study-buddy:build",
            "proxyConfig": "src/proxy.config.json"
          },

Also i added --proxy-config src/proxy.config.json parameter. "start": "ng serve --proxy-config src/proxy.config.json"

I call my service like this;

return this.http.post<LoginResponseData>('/api/users/login', {
      user: {email: email, password: password}
    }).pipe(catchError(LoginService.handleError), tap(response => {
      return this.handleAuth(response.user.id, response.user.email, response.user.bio, response.user.image,
        response.user._token, response.user.firstName, response.user.lastName)
    }))

My Log;

alibugrat@Alis-MacBook-Air study-buddy % npm start

> study-buddy@0.0.1 start
> ng serve --proxy-config src/proxy.config.json

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.34 MB | 
styles.css, styles.js | styles        | 333.89 kB | 
polyfills.js          | polyfills     | 299.91 kB | 
main.js               | main          |  51.19 kB | 
runtime.js            | runtime       |   6.52 kB | 

                      | Initial Total |   3.01 MB

Build at: 2022-02-21T20:54:35.982Z - Hash: 45c414a1114da13d - Time: 1667ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

Solution

I solved the problem. I had to delete the origin header from the request. I changed my proxy.config.json to proxy.config.js and configured it like this;

const PROXY_CONFIG = {
  "/api/*": {
    "target": "https://xxx.herokuapp.com",
    "changeOrigin": true,
    "secure": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    },
    "onProxyReq": function(pr, req, res) {
      pr.removeHeader('Origin');
    }
  }
};

module.exports = PROXY_CONFIG;.removeHeader('Origin');
    }

But still i don't receive any log. :(

Answered By - Ali Buğra Topçuoğlu