title: Angular Universal has CORS issue on API req when routing to page, but not when I refresh the page
body: <p>I'm starting to learn Angular 2+ after working with AngularJS for a bit and have been playing around with Angular Universal for the SSR to try it out and learn along the way.</p>
  <p>However, I've been running into this CORS issue with an API request I have in the <code>ngOnInit</code> on one of the views that loads additional details about the selected item.</p>
  <p>The CORS issue only happens when I navigate from the list page, which is a static list of coins to select with router links, to a specific coin's detail page.</p>
  <p><a href="https://i.stack.imgur.com/hVpDB.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hVpDB.gif" alt="Video showing CORS issue" /></a></p>
  <p>I was using these two tutorials as guide posts when working through this stuff.</p>
  <p><a href="https://dev.to/igorfilippov3/angular-universal-boilerplate-setup-239e" rel="nofollow noreferrer">Angular SSR With HttpClient rehydration</a></p>
  <p><a href="https://snipcart.com/blog/angular-seo-universal-server-side-rendering" rel="nofollow noreferrer">Angular SSR</a></p>
  <p>Any help would be appreciated, my skills aren't super strong on the frontend and I'm not very familiar with CORS.</p>
  <p>Router Code Snippet:</p>
  <pre><code>const routes: Routes = [
    { path: '', component: CoinListComponent },
    { path: 'coin/:symbol', component: CoinSnapshotComponent },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, {
        initialNavigation: 'enabled',
      }),
    ],
    exports: [RouterModule],
  })
  export class AppRoutingModule {}
  </code></pre>
  <p>List View:</p>
  <pre><code>&lt;h2&gt;Current Coins&lt;/h2&gt;
  &lt;ul *ngFor=&quot;let coin of coins&quot;&gt;
    &lt;li&gt;
      &lt;div&gt;
        &lt;a routerLink=&quot;/coin/{{coin.symbol}}&quot;&gt;&lt;span&gt;{{coin.name}} - {{coin.symbol}}&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Coin Detail Component:</p>
  <pre><code>interface CoinData {
    [key: string]: number;
  }
  interface CoinDataResponse {
    data: {
      currency: string;
      rates: CoinData;
    };
  }
  
  @Component({
    selector: 'app-coin-snapshot',
    templateUrl: './coin-snapshot.component.html',
    styleUrls: ['./coin-snapshot.component.scss'],
  })
  export class CoinSnapshotComponent implements OnInit {
    coins = coins;
    coin: Coin;
    defaultCoin: Coin;
    coinData: CoinData | undefined;
    constructor(
      private route: ActivatedRoute,
      private http: CustomHttpClientService
    ) {
      this.defaultCoin = {
        symbol: 'DEFAULT',
        name: 'DEFAULT',
        link: 'DEFAULT',
      };
      const symbol = this.route.snapshot.paramMap.get('symbol');
      this.coin = this.findCoinBySymbol(symbol);
    }
  
    ngOnInit(): void {
      if (!this.isDefault(this.coin)) {
        this.getCoinData(this.coin);
      }
    }
  
    findCoinBySymbol(symbol: string | null) {
      const coin = this.coins.find((coin) =&gt; coin.symbol === symbol);
      if (!coin) {
        return this.defaultCoin;
      }
      return coin;
    }
  
    isDefault(coin: Coin) {
      return coin.name === 'DEFAULT' &amp;&amp; coin.symbol === 'DEFAULT';
    }
  
    getCoinData(coin: Coin) {
      this.http.get&lt;CoinDataResponse&gt;(coin.link).subscribe((coin) =&gt; {
        this.coinData = coin.data.rates;
      });
    }
  }
  </code></pre>
  <p>Coin Object that the link comes from:</p>
  <pre><code>export interface Coin {
    name: string;
    symbol: string;
    link: string;
  }
  
  const coins: Coin[] = [
    {
      name: 'Bitcoin',
      symbol: 'BTC',
      link: 'https://api.coinbase.com/v2/exchange-rates?currency=BTC',
    },
    {
      name: 'Ethereum',
      symbol: 'ETH',
      link: 'https://api.coinbase.com/v2/exchange-rates?currency=ETH',
    },
    {
      name: 'Chainlink',
      symbol: 'LINK',
      link: 'https://api.coinbase.com/v2/exchange-rates?currency=LINK',
    },
  ];
  
  export default coins;
  </code></pre>
  <p>CustomHttpClient Code (Mainly from <a href="https://dev.to/igorfilippov3/angular-universal-boilerplate-setup-239e" rel="nofollow noreferrer">Angular SSR With HttpClient rehydration</a> article):</p>
  <pre><code>import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
  import { HttpParams, HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { tap } from 'rxjs/operators';
  import {
    StateKey,
    makeStateKey,
    TransferState,
  } from '@angular/platform-browser';
  import { isPlatformServer } from '@angular/common';
  
  @Injectable()
  export class CustomHttpClientService {
    constructor(
      private httpClient: HttpClient,
      private transferState: TransferState,
      @Inject(PLATFORM_ID) private platformId: Object
    ) {}
  
    get&lt;T&gt;(path: string, params?: HttpParams): Observable&lt;T&gt; {
      const transferKey: StateKey&lt;T&gt; = makeStateKey(
        `${path}?${params != null ? params.toString() : ''}`
      );
  
      if (this.transferState.hasKey(transferKey)) {
        return of(this.transferState.get&lt;any&gt;(transferKey, 0)).pipe(
          tap(() =&gt; this.transferState.remove(transferKey))
        );
      } else {
        return this.httpClient
          .get&lt;T&gt;(path, { observe: 'body', responseType: 'json', params: params })
          .pipe(
            tap((response) =&gt; {
              if (isPlatformServer(this.platformId)) {
                this.transferState.set&lt;T&gt;(transferKey, response);
              }
            })
          );
      }
    }
  }
  </code></pre>
  <p>Core Module:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { CustomHttpClientService } from 'src/app/core/custom-http-client.service';
  import { CookiesInterceptor } from 'src/app/core/cookies.interceptor';
  
  @NgModule({
    imports: [HttpClientModule],
    providers: [
      CustomHttpClientService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: CookiesInterceptor,
        multi: true,
      },
    ],
  })
  export class CoreModule {}
  </code></pre>