Setting proxy target dynamically in Angular

In my Angular/Django REST app I need Youtube videos to be displayed from a <video> element. So I retreive the youtube video src from my backend with youtube dl and send it to my frontend for it to be displayed.

In order to deal with the CORS issue, I wrote this proxy.conf.json:

{ "\/api": {
    "target": "https://r5---sn-25ge7nsk.googlevideo.com",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^\/api": "/"}
  }
}

It works great. But because each video has a different starting url (ex: "https://r2---sn-25g57nsk.googlevideo.com", "https://r1---sn-25ge7esk.googlevideo.com"....), I decided to load the target dynamically. So I changed my proxy.conf.json for this proxy.conf.js

const PROXY_CONFIG = [
  {
    context: ["/api"],
    target: proxyUrl,
    secure: true,
    changeOrigin: true,
    logLevel: "debug",
    pathRewrite: { "^\/api": "/" }
    
  }
]
module.exports = PROXY_CONFIG;

Then I created a global.ts:

import { Injectable } from '@angular/core';
@Injectable()
export class Globals {
  proxyUrl: string = "https://r5---sn-25ge7nsk.googlevideo.com"  
} 

Without forgotting to add it in my app.module.ts. The idea is to retreive the begining of the url of the video, then set it as the value of the global proxyUrl, and then play the video.

My issue now is that I can't figure out how to import proxyUrl into my proxy.conf.js

I've tried:

import {Globals} from "./src/app/global"

But I got: Unexpected token { in return. As well I would like to know if it's the right way to fix my issue.

Another thing I tried is to set my proxy this way:

proxyUrl = "https://"

But as I suspected, it didn't work.

from Setting proxy target dynamically in Angular