title: Angular 10 - Endpoint access works from postman but not from Angular
body: <p>I have a frontend angular application that I am running from <strong>localhost:4200</strong></p>
  <p>I also have a backend api application that I am running from <strong>localhost:8080</strong></p>
  <p>I also have postman running, which I used to test these endpoints before I created the angular frontend.</p>
  <p>My issue is <strong>localhost:8080/</strong> works after calling <strong>localhost:8080/sign-in</strong> via postman, but not after calling <strong>localhost:8080/sign-in</strong> by my angular frontend.</p>
  <p>I can use the route <strong>localhost:8080/sign-in</strong> via postman, which signs in the user and sets the session cookie.
  Here is the result:</p>
  <p><strong>Response:</strong></p>
  <pre><code>It returns the user object here as JSON
  </code></pre>
  <p><strong>Header:</strong></p>
  <pre><code>Access-Control-Allow-Origin:    
  Access-Control-Expose-Headers   Set-Cookie
  Content-Type    application/json; charset=UTF-8
  Set-Cookie  session_=RTZCYXOW3ILNKOOZQOZKEC4Y3J3YPOVUGGA6TI46ZLRX5UAWS77O7TGE74ZEFQEOTZLTCKRTCYJJ57OT24KUPPMBPYOXWBZRXF54PGA; Path=/; Expires=Sun, 29 Nov 2020 09:33:43 GMT; Max-Age=604800
  Vary    Origin
  X-Request-Id    gTCSwvwm4m8oLDqy99fkhqAeWgrddnjl
  Date    Sun, 22 Nov 2020 09:33:43 GMT
  Content-Length  658
  </code></pre>
  <p>Then I have another endpoint: <strong>localhost:8080/</strong> which requires the user to be signed in to access.</p>
  <p><strong>If they are signed in:</strong></p>
  <p><strong>Response</strong>:</p>
  <pre><code>“Valid”
  </code></pre>
  <p><strong>Header:</strong></p>
  <pre><code>Access-Control-Allow-Origin:    
  Access-Control-Expose-Headers   Set-Cookie
  Content-Type    application/json; charset=UTF-8
  Vary    Origin
  X-Request-Id    mRy9w40wEKx4zI2h4JuaMAZ2CppbvzHR
  Date    Sun, 22 Nov 2020 09:34:47 GMT
  Content-Length  8
  </code></pre>
  <p>If they are not signed in:</p>
  <p><strong>Response:</strong></p>
  <pre><code>&quot;access denied”
  </code></pre>
  <p><strong>Header:</strong></p>
  <pre><code>Access-Control-Allow-Origin: 
  Access-Control-Expose-Headers: Set-Cookie
  Content-Type: application/json; charset=UTF-8
  Vary: Origin
  X-Request-Id: eRQJwPIXQnAOavpgkhobNoJnKgbQmDpE
  Date: Sun, 22 Nov 2020 09:36:11 GMT
  Content-Length: 18
  </code></pre>
  <p>Now from my angular application I am able to call the <strong>localhost:8080/sign-in</strong> endpoint.
  This does return the user as a JSON object which is the same as postman.</p>
  <p>However I do not think it is setting the cookie so that when I call the <strong>localhost:4200/</strong> endpoint from my angular application it gives the error: [HTTP/1.1 403 Forbidden 1ms] which is the same error I get from postman if I try to access that endpoint while signed out.</p>
  <p>I ensured that I called the <strong>localhost:8080/sign-in</strong> before trying <strong>localhost:8080/</strong> while on the angular frontend (to try and have the cookie set first)</p>
  <p>Here is my relevant configurations on my backend api:</p>
  <p><strong>This is the session store configuration</strong></p>
  <pre><code>store.Options(sessions.Options{
      Path: &quot;/&quot;,
      MaxAge:   86400 * 7,
      HttpOnly: false,    
  })
  </code></pre>
  <p><strong>This is the middleware configuration</strong></p>
  <pre><code>e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
      AllowOrigins:  []string{&quot;http://localhost:4200&quot;},
      AllowHeaders:  []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept, echo.HeaderAccessControlAllowCredentials},
      ExposeHeaders: []string{echo.HeaderSetCookie},
      AllowCredentials: true,
  }))
  </code></pre>
  <p>Here are my services and components for signing in on the angular frontend:</p>
  <p><strong>auth-http.service.ts</strong></p>
  <pre><code>  login(email: string, password: string): Observable&lt;Response&gt; {
  
      let headers = new HttpHeaders({'Content-Type': 'application/json'});
      headers.set('access-control-allow-origin',&quot;http://localhost:4200/&quot;);
      headers.set('withCredentials', &quot;true&quot;);
    
  
     
      let result =  this.http.post&lt;any&gt;(`${API_URL}/sign-in`,   { email: email, password: password }, { headers });
  
      return result;
  
  
    }
  
    test(): Observable&lt;Response&gt; {
  
      let headers = new HttpHeaders({'Content-Type': 'application/json'});
      headers.set('access-control-allow-origin',&quot;http://localhost:4200/&quot;);
      headers.set('withCredentials', &quot;true&quot;);
      
      let result =  this.http.get&lt;any&gt;(`${API_URL}/`, { headers });
  
      return result;
  
    }
  </code></pre>
  <p><strong>auth.service.ts</strong></p>
  <pre><code>  login(email: string, password: string): Observable&lt;UserModel&gt; {
   
      this.isLoadingSubject.next(true);
  
      return this.authHttpService.login(email, password).pipe(
  
        map((result: Response) =&gt; {
  
          // undefined
          console.log(result.headers)
         
          console.log(result);
          // pass in the auth here
         
    
          return result;
        }),
        //switchMap(() =&gt; this.getUserByToken()),
        catchError((err) =&gt; {
          console.error('err', err); // here
          return of(undefined);
        }),
        finalize(() =&gt; this.isLoadingSubject.next(false))
      );
    }
  
    test(): Observable&lt;any&gt; {
   
      this.isLoadingSubject.next(true);
  
      return this.authHttpService.test().pipe(
  
        map((result: Response) =&gt; {
          return result;
        }),
        //switchMap(() =&gt; this.getUserByToken()),
        catchError((err) =&gt; {
          console.error('err', err); // here
          return of(undefined);
        }),
        finalize(() =&gt; this.isLoadingSubject.next(false))
      );
    }
  </code></pre>
  <p><strong>login.component.ts</strong></p>
  <pre><code>  submit() {
      this.hasError = false;
      const loginSubscr = this.authService
        .login(this.f.email.value, this.f.password.value)
        .pipe(first())
        .subscribe((user: UserModel) =&gt; {
          console.log(user);
          if (user) {
            this.router.navigate([this.  returnUrl]);
          } else {
            this.hasError = true;
          }
        });
      this.unsubscribe.push(loginSubscr);
    }
  
    test() {
         this.hasError = false;
      const loginSubscr = this.authService
        .test()
        .pipe(first())
        .subscribe((res: any) =&gt; {
          console.log(res);
         if (res) {
            console.log(res)
          } else {
            this.hasError = true;
          }
        });
  this.unsubscribe.push(loginSubscr);
    }
  </code></pre>
  <p>For testing the <strong>localhost:8080/</strong> endpoint I just created a test button on the login html component which then calls a test service to see if it can access the <strong>localhost:8080/</strong> endpoint.</p>