Change Accepted MIME Type on Azure without Web.Config

5
votes

I want to show an .mp4 as a background video on a website I created and deployed to Azure via FTP. Unfortunately, accessing the background video always gives me a 404. The pages are all .html files using AngularJS.

I figure that I need to add a custom mime type for .mp4s. Normally this would be done in the Web.Config, but since it was just something I whipped up in Notepad++ I don't have (and besides this issue, haven't really had need for) a Web.Config.

I was looking at the Configuration section in the Azure Portal for the site and can see where I can add connection strings and appSettings, but I don't see anything where I can do MIME types.

Is allowing .mp4s on Azure possible through the portal, or is my only option to make a Web.Config and FTP that up too?

2
azureweb-configazure-web-app-service

2 Answers

6
votes

The only way to do this is via the Web.config file. This link below will help you configure the settings in web.config:

Use SVG in Windows Azure Websites

0
votes

I tried the web.config solution but it didn't work out for me because I was using AuthInterceptor to set Headers globally.

export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept': 'application/json',
        'Authorization': `Bearer ${token_here}`,
      },
    });
    return next.handle(req);
  }
}

So, this was also setting up the headers for SVGs and other media files, like in your case for mp4. So, I used to filter the incoming request based on type of request and the type of resource requested. Below is a piece of code:

export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method === 'GET' && req.url.endsWith('.svg')) {
      req = req.clone({
        setHeaders: {
          'Authorization': `Bearer ${btoa("admin:admin")}`,
        },
      });
    }
    else {

      req = req.clone({
        setHeaders: {
          'Content-Type': 'application/json; charset=utf-8',
          'Accept': 'application/json',
          'Authorization': `Bearer ${btoa("admin:admin")}`,
        },
      });
    }
    return next.handle(req);
  }
}