Testing LiveView Upload S3 signed upload from development machine(localhost:4000) and getting the message “External client failure”. Upon logging the hook uploader in app.js I see this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://secret-bucket.s3.amazonaws.com/. (Reason: CORS header “Access-Control-Allow-Origin” missing).

I tried adding
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

to the request but no change. Is this actually a response error? Does this mean that the change needs to be made on the amazon s3 bucket/instance? Or should the change be made in the phoenix router(or alternatively, add the corsica elixir module?). Bit confused here..

dependencies:

  phoenix 1.6.0
  phoenix_ecto 4.4.0
  phoenix_html 3.0.4
  phoenix_live_dashboard 0.5.2
  phoenix_live_reload 1.3.3
  phoenix_live_view 0.16.4

in app.js:

let Uploaders = {}
Uploaders.S3 = function(entries, onViewError){
  entries.forEach(entry => {
    console.log("entry")
    console.log(entry)
    let formData = new FormData()
    let {url, fields} = entry.meta
    console.log("url")
    console.log(url)
    
    console.log("fields")
    console.log(fields)
    
    Object.entries(fields).forEach(([key, val]) => formData.append(key, val))
    formData.append("file", entry.file)
    let xhr = new XMLHttpRequest()
    onViewError(() => xhr.abort())
    xhr.onload = () => ((xhr.status === 204 || 200) ? entry.progress(100) : entry.error())
    xhr.onerror = () => entry.error()
    xhr.upload.addEventListener("progress", (event) => {
      console.log("addEventListener event")
      console.log(event)
  
      if(event.lengthComputable){
        let percent = Math.round((event.loaded / event.total) * 100)
        if(percent < 100){ entry.progress(percent) }
      }
    })
    xhr.open("POST", url, true)
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.send(formData)
  })
}