Deploying a droplet from Vue.js app admin panel - blocked by CORS policy

April 16, 2019 858 views
API JavaScript Ubuntu

Hello,

I am trying to launch a new droplet through API the same way as I’ve done from terminal through curl.

curl -X POST “https://api.digitalocean.com/v2/droplets” \
-d’{“names”:[“sub-01.example.com”,“sub-02.example.com”],“region”:“nyc3”,“size”:“s-1vcpu-1gb”,“image”:“ubuntu-16-04-x64”}’ \
-H “Authorization: Bearer $TOKEN” \
-H “Content-Type: application/json”

This works perfect from the terminal.

What I’m trying to do now is to launch it from just clicking a button in my VueJS Admin panel.

My code is:

<template>
   <form class="" method="post" @submit.prevent="DeployNow">

    <button
      type="submit"
      name="button"
      :loading="loading"
      @click="DeployServer"
    >
      Submit
    </button>

   </form>
</template>
<script>
import axios from 'axios'

export default {
  name: 'DeployNow',
  data () {
    return {
      name: '',
      show: false
    }
  },
  methods: {
    async DeployNow () {
      axios.put('https://api.digitalocean.com/v2/droplets', {
        headers: {
          'Content-type': 'application/json'
        },
        params: {
          Param: 'Value'
        },
        body:
        'this.name',
        'this.names': 'sub-01.example.com,sub-02.example.com',
        'this.thisregion': 'nyc3',
        'this.size': 's-1vcpu-1gb',
        'this.image': 'ubuntu-16-04-x64',
        'this.Authorization': 'Bearer $TOKEN'
      })
    }
  }
}
</script>

But I’m getting:
Access to XMLHttpRequest at ’https://api.digitalocean.com/v2/droplets’ from origin ’https://dev.logima.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

This is my first time trying to set up a post request to DigitalOcean. I am a bit clueless on how to add my API Key in the code as I’ve tried experimenting with a few options but to no avail.

I’m trying to convert the curl command in vue.js where the request sends the body information like a form or something, then when DigitalOcean receives this information, it would work the same way as the curl command works from terminal.

I’ve spent days trying to find a solution on this so any input and feedback is highly appreciated.

Thank you!

2 Answers

Greetings!

We have some documentation that may assist on this:
https://developers.digitalocean.com/documentation/v2/#cors

Jarland

Thanks for the reply!

I’m not using spaces. I’m trying to deploy droplets, so I am a little bit unsure how to apply it in my case.

  • Reading comprehension fail on my part. I’m so used to seeing CORS requests relating to Spaces that I’ve entirely tuned out your issue. My bad. I’ll see what I can find out for you.

  • I’ve updated my answer to be less incorrect. Andrew, our resident genius, pointed me to the correct information which I was not personally aware of.

Have another answer? Share your knowledge.