Use _redirect to avoid CORS issue for HTML video tag

Hi Netlify team,

I am using _redirect as below to proxy the access of any remote video files in other servers and I hope it could avoid CORS issue.

/cors-proxy/*  /:splat  200!

Then in my reactjs app, I could use video tag like below:

<video src=`/cors-proxy/${targetUrl}` .../>

But the chrome browser report:

GET https://dp-247--astounding-lily-fa33fc.netlify.app/cors-proxy/https://xyz.mp4 404 (Not Found)
  • My netlify site name. dp-247--astounding-lily-fa33fc.netlify.app

So is my _redirect file correct to solve this problem? Or is there any other better solution?

What you have as written looks like it wouldn’t work, since the redirect:

/cors-proxy/*  /:splat  200!

Would turn whatever is passed into a root relative url, and even if the full url made it through the various parsing, you would end up with:

/https://xyz.mp4

Testing with the playground it appears that the target url must start with a / or be a destination domain url itself, so you cannot have a destination of :slug or https://:slug, but could have https://www.destination.com/:slug

If you aren’t really trying to throw “any url at all at it” you could probably do something like:

/cors-proxy/vimeo/*    https://vimeo.com/:slug    200!
/cors-proxy/youtube/*  https://youtube.com/:slug  200!

Then link to them via

<video src=`/cors-proxy/vimeo/${targetUrl}` .../>
<video src=`/cors-proxy/youtube/${targetUrl}` .../>

Thank you nathanmartin, but my intention is for any url e.g. https://xyz.com/abc.mp4, like

/cors-proxy/https://xyz.com/abc.mp4

User could put any URL here in my app.

Can I use _redirect to solve this problem? If not, any better solution?

@vincentsong I know what your intention is, but my understanding is that it’s not possible due to the limitations that I mentioned.

You may have been following this article:

At the top of the article it mentions:

Update 2021-10-27 : Turns out Netlify has deprecated the ability to do this—and this post is specifically called out in the deprecation announcement. Oops.

The specific thread from Netlify outlining that what you’re trying to do, (an ‘open proxy’), has been removed is here:

OK, I got it. Then is a serverless funcion could solve this problem? I never done that before, and didn’t find any example for video streaming.

Hi @vincentsong :wave:t6: ,

A serverless function could possibly solve this problem but that depends mainly on what you are trying to achieve.