Skip to content

Instantly share code, notes, and snippets.

@kikoseijo

kikoseijo/axios-cors-test-vue.html

Last active December 19, 2017 15:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kikoseijo/e311e44d26dacf82be8bd4a33830fa0f to your computer and use it in GitHub Desktop.
Save kikoseijo/e311e44d26dacf82be8bd4a33830fa0f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
axios-cors-test-vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.10/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css">
</head>
<body>
<div id="app" class="container" style="margin:62px auto;">
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" v-model="url" placeholder="Url">
</div>
<div class="control">
<a class="button is-info" v-on:click="testCoors">Make test</a>
</div>
</div>
<hr>
<label class="checkbox"><input type="checkbox" v-model="showGetResults"> Show Get Results</label> &nbsp;&nbsp;&nbsp;&nbsp;
<label class="checkbox"><input type="checkbox" v-model="showPostResults"> Show Post Results</label>
<hr>
<h5 class="title">
GET Test
<span class="tag is-success is-pulled-right " v-if="testGet">Success</span>
<span class="tag is-danger is-pulled-right" v-if="testGetError">Error</span>
</h5>
<div class="debug-area box" v-show="showGetResults">
<div class="alert alert-success" v-if="testGet">
<pre>{{testGet}}<pre>
</div>
<div class="alert alert-warning" v-if="testGetError">
<span><b>Response Headers</b></span>
<pre>{{testGetError.headers}}</pre>
<span><b>Response Data</b></span>
<pre>{{testGetError.data}} </pre>
</div>
</div>
<h5 class="title">
POST Test
<span class="tag is-success is-pulled-right" v-if="testPost">Success</span>
<span class="tag is-danger is-pulled-right" v-if="testPostError">Error {{testPostError.status}}</span>
</h5>
<div class="debug-area box" v-show="showPostResults">
<div class="alert alert-success" v-if="testPost">
<pre>{{testPost}}<pre>
</div>
<div class="alert alert-warning" v-if="testPostError">
<span><b>Response Headers</b></span>
<pre>{{testPostError.headers}}</pre>
<br />
<span><b>Response Data</b></span>
<pre>{{testPostError.data}}</pre>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
input: '# hello',
showGetResults: false,
showPostResults: false,
testGet: '',
testPost: '',
testGetError: '',
testPostError: '',
url: 'http://musicboxx.sunnyface.com/v1/'
},
created () {
this.testCoors()
},
methods: {
testCoors () {
const vm = this
axios.get(this.url + 'toolbox').then(res => {
vm.testGet = res
// console.log(res)
}).catch(error => {
vm.testGetError = error.response
})
axios.post(this.url + 'support/email', {name: 'kiko'}).then(res => {
vm.testPost = res
// console.log(res)
}).catch(error => {
vm.testPostError = error.response
console.log(error.response.data)
console.log(error.response.status)
console.log(error.response.headers)
})
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment