ProxyTable не работает в vuejs при вызове API

Question

В config / index. js я настраиваю вот так

proxyTable: {
      '/api': {
        target: 'http://localhost:44322',
        changeOrigin: true
      }
    },

И этот код я вызываю методом get.

<template>
<div>
  <ul v-if="posts && posts.length">
    <li v-for="post of posts" v-bind:key="post.employeeId">
      <p><strong>{{post.firstName}}</strong></p>
      <p>{{post.lastName}}</p>
      <p>{{post.phoneNumber}}</p>
      <p>{{post.dateOfBirth}}</p>
      <p>{{post.email}}</p>
    </li>
  </ul>

  <ul v-if="errors && errors.length">
    <li v-for="error of errors" v-bind:key="error.id">
      {{error.message}}
    </li>
  </ul>
</div>
</template>

<script>
import Axios from 'axios'
export default {
  name: 'Axios',
  data () {
    return {
      posts: [],
      errors: []
    }
  },

  // Fetches posts when the component is created.
  created () {
    Axios.get('/api/employee')
      .then(response => {
      // JSON responses are automatically parsed.
        this.posts = response.data
      })
      .catch(e => {
        this.errors.push(e)
        console.log(e)
      })
  }
}
</script>

Я хочу, когда я звоню

http://localhost:8080/#/axios

клиентский вызов к бэкэнду:

http://localhost:44322/api/employee

Но ничего не происходит, я вижу в заголовке запроса URL:

localhost:8080

я передаю ссылку vuejs: https://vuejs-templates.github.io/webpack/proxy.html, часть API Proxying во время разработки. Есть идеи для этого? Спасибо !!

Answer 1

вы увидите URL запроса как http://localhost:8080/api/employee в браузере

и, наконец, запрос будет перенесен на http://localhost: 44322/api/employee, который вы не увидите на сетевой панели вашего браузера