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

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: https://developers.cloudflare.com/stream/uploading-videos/direct-creator-uploads#using-tus-recommended-for-videos-over-200mb

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.