I'm testing out the new Umbraco Headless Beta within a Vue CLI project. Currently I am receiving a 400 Bad Request error when I attempt to authenticate with the Headless Service.

The error reads:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 400. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Within the App.vue single file component, I am authenticating with Umbraco Headless like so:

//App.vue
....


<script>
import UmbracoHeadless from 'umbraco-headless'
var headlessService

var config = {
  url: 'https://****.s1.umbraco.io',
  username: '****',
  password: '****',
  imageBaseUrl: 'https://****.s1.umbraco.io'
}

async function run () {
  headlessService = new UmbracoHeadless.HeadlessService(config)
  await headlessService.authenticate()
}

run()

export default {
  name: 'App'
}
</script>


....

Is there a way of modifying an Umbraco Cloud project to enable Cross Origin Resource Sharing?

Or is there perhaps an issue with how I am attempting to authenticate with Umbraco Headless Service within my Vue web-app?