Angular Interceptors with Discord Oauth & Cors

I'm trying to setup oauth2 login with discord, I've set the url to get the oauth code as an environment variable in my 'environment.ts' so the issue isn't with the url being misspelled.

The href anchor link works just fine, however when calling the service method and (as far as i understand) adding the interceptor in the mix, I get this error every time (abbreviated authorize urls)

Access to XMLHttpRequest at 'https://discord.com/oauth2/authorize.....' (redirected from 'https://discord.com/api/oauth2/authorize?....') from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Interceptor code:

 import {Injectable} from '@angular/core';
import{
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
    constructor() {

    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log("testing...");

        request = request.clone({
            withCredentials: true
        });
        return next.handle(request);
    }
}

HTML page-

<div>
    <button class="btn btn-primary btn-center" (click)="login()"> Login With Discord </button>
</div>
<div>
    <a href={{login_url}}>Login2</a>
</div>

corresponding TS file:

import { Component, OnInit } from '@angular/core';

import { OauthService } from '../../services/oauth/oauth.service';
import {DISCORD_LOGIN_URL} from '../../../environments/environment';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  
  constructor(private oauthService: OauthService) { }
  login_url = DISCORD_LOGIN_URL;
  ngOnInit(): void {
  }


  public login():void {
    this.oauthService.login().subscribe(
      data => console.log(data)
    );
  }
}

service file with method being called on button push:

    import { Injectable } from '@angular/core';

// import {Response } from '@angular/http';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import { throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

import {DISCORD_LOGIN_URL} from '../../../environments/environment';
import {CLIENT_ID} from '../../../environments/environment';
import {CLIENT_SECRET} from '../../../environments/environment'; 
import {REDIRECT_URI} from '../../../environments/environment';
import {SCOPE} from '../../../environments/environment';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class OauthService {

  clientId: string;
  clientSecret: string;
  login_url: string;
  scope: string;
  redirect_uri: string;
  token: string;

  constructor(private http: HttpClient) {

    this.clientId = CLIENT_ID;
    this.clientSecret = CLIENT_SECRET;
    this.redirect_uri = REDIRECT_URI+ '/main';
    this.scope = SCOPE;
    this.login_url = DISCORD_LOGIN_URL;
   }

    
   public requestCore(): Observable<any> {
     return this.http
          .get(this.login_url)
          
   }

   public login():  Observable<any> {
     return this.http
        .get(this.login_url);
   }


   handleError(error: HttpErrorResponse) {
    let errorMessage = 'Unknown error!';
    if (error.error instanceof ErrorEvent) {
      errorMessage = `Error: ${error.error.message}`;
    } else {
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    window.alert(errorMessage);
    return throwError(errorMessage);
  }
}

I've tried looking around to see if there's been any similar issues previously, and I can't find one (on the likely chance i'm missing it), most posts say to allow cross origin on the server side, however i don't believe that to be the issue since the anchor href works.

Thanks in advance!

ps- I'm not looking to install a chrome plugin/disable a setting in my local browser as the eventual plan is to use this angular project publicly.

Edit 1- Getting two network calls when clicking the button, I believe the first is passing CORS and completing with status 302, then the second call is failing..

Edit 2- I've tried setting it up on an express server with this code in my server.js file, still getting the same error;

    app.use(express.static('./dist/De-Bot'), 
    function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });