Uppy Tus Plugin CORS Origin Policy Issues

880 views Asked by At

I'm using Uppy TUS JS Client to upload files to my remote server on a VPS running Nodejs + PM2 + socketio. The server runs fine and I'm capable of sending and receiving data back and fourth just fine with my web app. No problem there. Problem is with Uppy Uploader. When trying to send files to my server I receive following errors :

Access to XMLHttpRequest at 'https://server.mywebsite.com/user/user11650066423047cloud/cloud/' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Uppy] [12:31:02] Failed to upload 1.png This looks like a network error, the endpoint might be blocked by an internet provider or a firewall.

This is my codes :

<!-- Load Uppy CSS bundle. It is advisable to install Uppy
from npm/yarn instead, and pick and choose the plugins/styles you need.
But for experimenting, you can use Transloadit’s CDN, Edgly: -->
<link rel="stylesheet" href="https://releases.transloadit.com/uppy/v2.9.3/uppy.min.css">
<link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/v1.7.0/uppy.min.css">
<!-- Load Uppy JS bundle. -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.7.0/uppy.min.js"></script>
<script src="https://releases.transloadit.com/uppy/v2.9.3/uppy.min.js" type="module"></script>
<script src="https://releases.transloadit.com/uppy/v2.9.3/uppy.legacy.min.js" nomodule></script>
<script src="https://releases.transloadit.com/uppy/locales/v2.0.8/ru_RU.min.js"></script>

//uppy
var uppy = new Uppy.Core()
.use(Uppy.Dashboard)
.use(Uppy.Tus, 
{endpoint: path,
headers: {}
})

// And display uploaded files
uppy.on('upload-success', (file, response) => {
const url = response.uploadURL
const fileName = file.name

const li = document.createElement('li')
const a = document.createElement('a')
a.href = url
a.target = '_blank'
a.appendChild(document.createTextNode(fileName))
li.appendChild(a)

document.querySelector('.uploaded-files ol').appendChild(li);
console.log(li);
})

uppy.on('complete', (result) => {
console.log('Upload complete! We’ve uploaded these files:', result.successful);
})

uppy.getPlugin('Dashboard').openModal();
0

There are 0 answers