Home

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)
        });
    }