Webpack Vue.js未发送授权标头

我在Vue.js 2中使用Vue资源和axios时遇到了授权头问题（两者的问题相同）。向后端发送请求时，Vue未添加标头。下面是我的代码和示例请求。服务器正在WSGIServer及其Django上运行（还不是nginx）

请求发送时：

<script>
  import Account from './Account.vue';
  import axios from 'axios';

  export default {
    data() {
      return {
        accounts: []
      }
    },
    created: function () {
      this.getAccounts();
    },
    methods: {
      getAccounts() {
        const token = localStorage.getItem('token');

        axios.defaults.baseURL = 'http://localhost:8000';
        axios.defaults.headers.common['Authorization'] = 'JWT <my_token>';

        axios.get('/api/accounts/')
          .then(
            response => {
              this.accounts = response.data;
            }
          )
          .catch(
            error => console.log(error)
          );

      },
    }
  }
</script>

访问控制请求标题：“授权，xxxxx”

而不是：

<script>
  import Account from './Account.vue';
  import axios from 'axios';

  export default {
    data() {
      return {
        accounts: []
      }
    },
    created: function () {
      this.getAccounts();
    },
    methods: {
      getAccounts() {
        const token = localStorage.getItem('token');

        axios.defaults.baseURL = 'http://localhost:8000';
        axios.defaults.headers.common['Authorization'] = 'JWT <my_token>';

        axios.get('/api/accounts/')
          .then(
            response => {
              this.accounts = response.data;
            }
          )
          .catch(
            error => console.log(error)
          );

      },
    }
  }
</script>

授权：“JWT”

后端工作正常-我使用CURL检查请求和响应

Accounts.vue:

<script>
  import Account from './Account.vue';
  import axios from 'axios';

  export default {
    data() {
      return {
        accounts: []
      }
    },
    created: function () {
      this.getAccounts();
    },
    methods: {
      getAccounts() {
        const token = localStorage.getItem('token');

        axios.defaults.baseURL = 'http://localhost:8000';
        axios.defaults.headers.common['Authorization'] = 'JWT <my_token>';

        axios.get('/api/accounts/')
          .then(
            response => {
              this.accounts = response.data;
            }
          )
          .catch(
            error => console.log(error)
          );

      },
    }
  }
</script>

响应标题

Allow:GET, POST, HEAD, OPTIONS
Content-Length:58
Content-Type:application/json
Date:Wed, 21 Jun 2017 06:59:34 GMT
Server:WSGIServer/0.2 CPython/3.5.2
Vary:Accept, Cookie
WWW-Authenticate:JWT realm="api"
X-Frame-Options:SAMEORIGIN

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:authorization,xxxxxx
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8000
Origin:http://localhost:8080
Referer:http://localhost:8080/accounts
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/58.0.3029.110 Chrome/58.0.3029.110 Safari/537.36

请求标题

Allow:GET, POST, HEAD, OPTIONS
Content-Length:58
Content-Type:application/json
Date:Wed, 21 Jun 2017 06:59:34 GMT
Server:WSGIServer/0.2 CPython/3.5.2
Vary:Accept, Cookie
WWW-Authenticate:JWT realm="api"
X-Frame-Options:SAMEORIGIN

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:authorization,xxxxxx
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8000
Origin:http://localhost:8080
Referer:http://localhost:8080/accounts
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/58.0.3029.110 Chrome/58.0.3029.110 Safari/537.36

---

您是否有一台服务器，同时提供网页和API？或者两个不同的服务？两个不同的服务器一个带有API的是localhost:8000，另一个（前端）localhost:8080标头是否也应该具有以下格式：Authorization:Bearer根据：节JSON Web令牌如何工作？问题可能是因为您的前端和API位于不同的端口上，浏览器必须处理CORS:

访问控制请求标头

和

访问控制请求方法

是浏览器发出的飞行前请求中的标题。你们在你们的API服务器上设置了CORS吗？我认为问题在前端，因为CURL工作正常，但问题在服务器上。我不知道为什么，因为它总是在这种配置下工作。问题是我的后端上的CORS，我用来解决标题的问题。感谢@vsenkoDo的帮助您是否有一台服务器，同时提供网页和API？或者两个不同的服务？两个不同的服务器一个带有API的是localhost:8000，另一个（前端）localhost:8080标头是否也应该具有以下格式：Authorization:Bearer根据：节JSON Web令牌如何工作？问题可能是因为您的前端和API位于不同的端口上，浏览器必须处理CORS:

访问控制请求标头

和

访问控制请求方法

是浏览器发出的飞行前请求中的标题。你们在你们的API服务器上设置了CORS吗？我认为问题在前端，因为CURL工作正常，但问题在服务器上。我不知道为什么，因为它总是在这种配置下工作。问题是我的后端上的CORS，我用来解决标题的问题。谢谢你的帮助@vsenko