Question

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

Posted April 16, 2019 1.4k views
UbuntuAPIJavaScript

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!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
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.

Submit an Answer