Question
Deploying a droplet from Vue.js app admin panel - blocked by CORS policy
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.
×