Cloudflare Stream TUS Upload - CORS XmlHttpRequest error

Access to XMLHttpRequest at ‘https://api.cloudflare.com/client/v4/accounts/{accountID}/stream?direct_user=true’ from origin ‘https://localhost:5002’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I realize that other people have encountered this, but I still can’t figure it out. I tried both Uppy and Tus-js-client and I get the same CORS error in both.

Here is my JS for Tus-JS-Client - I’ve replaced my account id with {accountID}:

// TUS-JS-CLIENT
window.UploadFile = (inputElement) => {
    var file = inputElement.files[0];

    var upload = new tus.Upload(file, {
        endpoint: '`https://api.cloudflare.com/client/v4/accounts/{accountID}/stream?direct_user=true`',
        retryDelays: [0, 3000, 5000, 10000, 20000],
        metadata: {
            filename: file.name,
            filetype: file.type,
        },
        onError: function (error) {
            console.log('Failed because: ' + error)
        },
        onProgress: function (bytesUploaded, bytesTotal) {
            var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)
            console.log(bytesUploaded, bytesTotal, percentage + '%')
        },
        onSuccess: function () {
            console.log('Download %s from %s', upload.file.name, upload.url);
        },
    });

    upload.findPreviousUploads().then(function (previousUploads) {
        if (previousUploads.length) {
            upload.resumeFromPreviousUpload(previousUploads[0]);
        }

        upload.start();
    });
}

I have also tried generating a Direct Upload URL and using that, but I get the same error. I’m simply trying to test TUS direct uploads from my Blazor WASM client. Direct uploads work fine.

Here is the other URL format that I’ve tried:
https://upload.videodelivery.net/tus/28ae34c6973d3ed505fc31f72e1aadfe?tusv2=true

I think there might be an issue with cloudflare at the moment. I’m getting a similar issue trying to upload via WebRTC

I am also getting same error. Any help please ?

@jared18 the WebRTC issue should be fixed. Please let me know if you’re still experiencing issues!

1 Like

@joshua.sanders are you still experiencing this with direct creator uploads?

1 Like

@kkipp working :slight_smile: thank you!

1 Like

Unfortunately I’m still receiving the same error.

“origin ‘https://localhost:5002’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

Do I need to add localhost:5002 as an allowed origin somewhere?

My current process is that I’m generating a URL that looks like this: ‘https://upload.videodelivery.net/tus/feaa993466f47a864b1f76899cbf3565?tusv2=true

Then I’m trying to use a TUS Client to my upload my file to that url.

I can see on my Stream Dashboard that the video is “pending” and greyed out, but it never leaves that state.

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

Do you have code to show what you’re doing to encounter this problem? HAR file would also suffice

1 Like

Have you tried following the steps outlined here? Direct creator uploads · Cloudflare Stream docs

I would pay special attention to these 2 points:

  1. The URL you feed to your TUS client should be to your endpoint that calls the Cloudflare API
  2. Your endpoint should return the URL returned by the Cloudflare API in the Location header

You can see a demo here: https://codepen.io/cfzf/pen/wvGMRXe (just choose a test file and you’ll see it upload to our demo account; you can observe (1) and (2) points above by looking at Inspector)

Once you have your endpoint, you can also test with your endpoint by replacing the Upload Endpoint URL with your URL

1 Like