I have an auth page which contains an dynamic captcha image(which is an svg format, i use v-html to render it), i want to send the captcha image's request from browser so i can cache the page. But when i check the Chrome's network tab, i can't see the request to captcha, i think the request is sent from server-side, so i add an on-click event to confirm my option, when i click it, it made an request from my browser. So, how to confirm the data is retrived from client(browser)?
Here is my code.
...
<div v-html="captcha" v-on:click="refresh"></div>
...
<script>
import axios from '~plugins/axios'
export default {
name: 'Login',
async data () {
const res = await axios.get('/api/captcha');
return {
formError: null,
formUsername: '',
formPassword: '',
captcha: res.data
}
},
...
methods: {
refresh: (event) => {
axios.get('/api/captcha')
.then((res) => {
return event.target.innerHTML = res.data
})
.catch((error) => {
console.log(error)
});
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c172">#c172</a>)</em></sub></div>