Setting proxy target dynamically in Angular

First of all I would like to say “Hello!!” to everybody, I am new here and pleased to integrate this community.

I am new to Angular 11, and I am developping a small app.
In it 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": "",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^\/api": "/"}

It works great. But because each video has a different starting url (ex: "", ""....) , 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';
export class Globals {
  proxyUrl: string = ""  

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.

I’ve post my question to Stack Overflow and someone suggested to use angular interceptor. I have searched for ressources and found an article about interceptors on this website.

But I am not quite sure how it would solve my issue. Could anyone give me a hint?