Getting CORS using tus (Direct creator uploads)

[ayush]

Hi,
i am getting CORS error on https://upload.videodelivery.net/ while trying to upload a file using tus-js-client.

how to resolve this ?

[sdayman]

Direct creator upload CORS error on upload

The startup I’m working for is trying to switch to Cloudflare Stream but I’m having troubles with the direct creatror uploads When a user is trying to upload via our web form they’re getting the following error: Access to XMLHttpRequest at 'https://upload.videodelivery.net/de1cc11b9c66[..]3abe8c0' from origin 'https://my-website' has been blocked by CORS policy: Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response. I have not set any allowedO…

[ayush]

i am getting a similar error but a bit different

Access to XMLHttpRequest at 'https://upload.videodelivery.net/tus/9d740cee10a52[..]0762ae558?tusv2=true' from origin '##redacted##' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[zaid]

Hi all, we’ve set up a demo codepen where you can input the tokenized tus url and attempt an upload: https://codepen.io/cfzf/pen/wvGMRXe

If your upload succeeds using this page, it means there is an issue with your client-side code.

Also, if your client side page resides on localhost, you may see CORS-related errors. We’d advise you to publish it to your domain and retry.

[ayush]

@zaid,
getting the same CORS error here as well.
we deployed the code on our dev server and still getting the same CORS error
can it be realted to allowedOrigins property in Upload-metadata ?

[ayush]

can you please help us out, i am getting the cors error on the codepen as well

[zaid]

Sent you a private message!

[irsd61]

Hi, did you figure it out? I am having the same issue.

[zaid]

Hi, what OS/browsers are you having the issue on?

[irsd61]

Im on chrome. I’ve tried the codepen - it shows upload successful. But it remains as “pending” on dashboard.

[zaid]

Got it. Can you privately message me the url that you are pasting into the codepen so I can investigate further?

[irsd61]

I just registered to this community. I don’t see an option to send PM.
I’ll just post the link here. I think it should be fine since it will expiry (in 30 min) anyway…

https://upload.videodelivery.net/tus/c57ae01776c3a22e98068e4c46114aad?tusv2=true

If possible, please pm me - i think i can reply but not send messages.

[irsd61]

Figured out the issue with the help of @zaid

For anyone that come across in the future.

The endpoint URL you are giving in your client (uppy/tus-js etc) should point to your server (not videodelivery.net url) - The server should returns the videodelivery.net url in the “location” header.

[renan]

Maybe this will help clarify for others who visit this page:

The order in which you do direct creator upload with TUS is:

1. Server side POST request to https://api.cloudflare.com/client/v4/accounts/$ACCOUNT/stream?direct_user=true with your Cloudflare API key. This request will return a response with a location header and a stream-media-id header. Save these.
2. Client side requests to upload using the TUS js library or Uppy using the URL in the location header.
3. Once the client side upload is complete, the URL will stop working.

[hart.wl]

The linked codepen demo fails with CORS errors for me, as does my code using uppy + React on localhost. I’m following exactly the steps above and have tried with and without allowedOrigins set in the request.

For my own code, the URL is requested from my server, then sent to client where its used to upload via Uppy + TUS. The URL is in the format: https://upload.videodelivery.net/tus/<ID>?tusv2=true. Uploads to the default URL in the codepen demo https://restless-resonance-fd00.zaid-stream-demo.workers.dev/ work fine.

I’m on Brave Version 1.18.75 Chromium: 87.0.4280.101 (Official Build) (64-bit). Tried in normal and in-private modes. The errors are:

Access to XMLHttpRequest at 'https://upload.videodelivery.net/tus/<ID>?tusv2=true' 
from origin 'https://cdpn.io' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

I can upload videos manually and stream them using the react player.

[hart.wl]

@renan

2. Client side requests to upload using the TUS js library or Uppy using the URL in the location header.

I found this step a bit unclear.

What removed CORS errors for me was following this advice

@irsd61

The endpoint URL you are giving in your client (uppy/tus-js etc) should point to your server (not videodelivery.net url)

The steps I followed were:

1. Point Uppy’s endpoint to my server’s API endpoint (not cloudflare upload URL)
2. My server requests an upload URL from cloudflare API (extracting it from the location header).
3. My server then sends an empty 201 response with the upload URL in it’s own Location header
4. Uppy automatically extracts the Location header and uploads the correct URL

[renan]

Yes! Thank you for explaining better than I did.

[mannan]

how did you get stream-media-id from response?.
uppy redirect endpoint to one time url that present in Location header.

i can’t find the option to extract response.!