Uploading to Cloudflare Stream CORS Reason: CORS header 'Access-Control-Allow-Origin' missing

Trying to use tus-js-client in a react web app to upload video clips, However when using the TUS protocol I ran into a CORS error and have been scratching my head in trying to fix. I am hoping the community can be of some assistance and shed some light on this error. I will share the code below and have attached a screenshot of the error message below.

let response = await axios.get("https://youclip-tus.arthurlangley04.workers.dev", {
    headers: {
        'Upload-Length': file.size,
        'Upload-Metadata': `filename ${btoa(file.name)} maxDurationSeconds ${btoa("135")}`
    }
});
const oneTimeUploadUrl = response.headers["location"];
console.log(oneTimeUploadUrl);
const upload = new tus.Upload(file, {
    endpoint: oneTimeUploadUrl,
    retryDelays: [0, 3000, 5000, 10000, 20000],
    metadata: {
        filename: file.name,
        filetype: file.type
    },
    onProgress: function (bytesUploaded, bytesTotal) {
        var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
        console.log(bytesUploaded, bytesTotal, percentage + "%")
    },
    onError: function (error) {
        console.log(error);
    },
    onSuccess: function () {
        console.log("upload worked!");
    }
})
upload.start();

I understand this code may seem tacky but this is only used in a dev enviroment. The clip I am using to has always been 2mins 15s long. Hence me not using the actual duration of the video.

Any help would be highly appreciated.

Regards, Arthur

2 Likes

CORS errors come up often for this setup. Have you read the other posts?

https://community.cloudflare.com/search?q=stream%20cors

I have looked at the other posts yeah. But sadly in the most recent one it looks as if the solution is how I am already uploading. Direct to the upload.videodelivery.net location URL

Regards, Arthur

@renan has been pretty good about figuring this stuff out. Maybe he can give it a look.

I can put the site on a cloudflare page if that would be helpful?

Hey, are you using the Direct Creator Uploads feature?

You can see a demo implementation of tus with Direct Creator Uploads feature here: https://codepen.io/cfzf/pen/wvGMRXe

In the demo, the default “Upload endpoint” value is pointing to a Worker script (in my account) running the Worker demo script in the docs: Direct creator uploads · Cloudflare Stream docs

This provide you some clues as to your own setup.

5 Likes

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.