2

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. What is the correct way to fix my issue?

Toto Briac
  • 908
  • 9
  • 29
  • How do you know which is the correct BASE_URL to use for each video? – Fmerco Jan 19 '21 at 13:38
  • I use youtube dl in my backend and for each video I get it's URL. My issue is that each time the BASE_URL is different according to which server YouTube used to host the video. – Toto Briac Jan 19 '21 at 15:04
  • why dont you just create a script in the backend named `proxy.conf.json` which will actually be handled by your web server as a `python` script and will have response header content-type:`application/json`, and each time the script is called it will produce the json dynamically to be included in your angular – Tch Jan 25 '21 at 23:13

1 Answers1

1

You can handle it in interceptor layer.

For detailed info, look at the official docs.

For a real example, please look at this reply.

embeddeddreams
  • 21
  • 1