Handling CORS With FileUpload Component

[wieli99]

I've been getting this error in console, which I cannot seem to fix;

Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/name/upload' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Code: Select all

<FileUpload
    :multiple="true"
    url="https://api.cloudinary.com/v1_1/risotto/upload"
    @before-send="setHeaders"
    chooseLabel="Add"
    uploadLabel="Upload"
  ></FileUpload>

Code: Select all

const setHeaders = ev => {
      ev.formData.append("upload_preset", "default");
      ev.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }

I do not have a server, this only runs locally. I've tried using workarounds like http://anywhere.herokuapp.com, but to no avail...

Does anyone have an idea how to solve this?

[wieli99]

For future readers: The error was fixed by removing

Code: Select all

      ev.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

I don't know how I didn't try that earlier... but whatever.
I can recommend troubleshooting by looking into the code of the PrimeVue component, it's very easy to understand what's going on there.