title: ¿how can i solve the following problem with an interceptor in angular?
body: <p>I am trying to use an interceptor to be able to request a new token from the Spotify API in case it is not in the localStorage or in case it has expired (401 error). But it happens that the requests that are made are the following:</p>
  <ol>
  <li>the first request to get the data from the API</li>
  <li>the request to the local server to obtain the new token (when the old one has expired)</li>
  </ol>
  <p>But the following request to obtain the data with the new token obtained in the GetNewAccessToken method is not carried out, I don't understand why. Place a TAP operator to print the GetNewAccessToken response and it doesn't show it to me either, I don't see what I could be doing wrong.</p>
  <p>In the network console I have these errors:</p>
  <p><a href="https://i.stack.imgur.com/VQdqD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VQdqD.png" alt="enter image description here" /></a></p>
  <p>What the GetNewAccessToken method does is this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  getNewAccessToken(){
      console.log('\n¨¨ GetNewAccessToken');
      return this.http.get('http://localhost:3000/');
    }</code></pre>
  </div>
  </div>
  </p>
  <p>And the API that requests the token from SPOTIFY works fine, I test it from Insomnia and it returns the token without problems. It is also important to note that I have the API with node.js and express. I installed CORS and am using it on all routes.</p>
  <p>I hope you can help me with this problem, thanks in advance. Greetings!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable, Injector } from '@angular/core';
  import { HttpClient, HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
  import { Observable, throwError } from 'rxjs';
  import { catchError, retry, mergeMap, tap, } from 'rxjs/operators'
  import { TokenService } from '../services/token.service';
  import { Token } from '@angular/compiler';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService implements HttpInterceptor{
  
    constructor( private injector: Injector) { }
    
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      console.log('\n\n**Interceptor....')
      
      let access_token = '';
  
      const token = localStorage.getItem("access_token") ;
  
      var clonHttp: HttpRequest&lt;any&gt;;
  
      clonHttp = token ? req.clone({ headers: req.headers.append("Authorization", `Bearer ${token}`) }) : req;
      console.log('\n[ClonHttp]\n',clonHttp);
  
      let tokenService = this.injector.get(TokenService);
  
      return next.handle(clonHttp)
        .pipe(
          catchError((err: HttpErrorResponse) =&gt; {
            if( err.status === 401 ){
              console.log('\n\n401');
              return tokenService.getNewAccessToken()
                .pipe(
                  tap( (resp:any) =&gt; {console.log('\n---&gt; TAP: ',resp)} ),
                  mergeMap( ( resp: any ) =&gt; {
                    localStorage.setItem( 'access_token', JSON.stringify( resp.access_token) )
                    clonHttp = req.clone({ headers: req.headers.append('Authorization', `Bearer ${resp.access_token}`) })
                    return next.handle(clonHttp);
                  } )
                )
            }
            return throwError(err.error); 
          })
        )
    }
  
  }</code></pre>
  </div>
  </div>
  </p>