django - VueJS 应用程序无法在移动浏览器上访问受保护的 API 端点

Question

我的 Vue 应用程序在移动浏览器上的使用存在问题。我在 Django 后端有一个受保护的 API 路由，它使用 JWT 进行身份验证/权限。当我进行身份验证时，我将 JWT 保存到 localStorage 和 Vuex，并将其作为来自 Vuex 存储的每个请求（使用 axios）的标头传递。这一切在我的笔记本电脑上都可以正常工作，但在移动设备上访问我的网站时却无法正常工作。使用手机（iOS 12）访问该站点时，我在日志中看到 401 未经授权的错误代码，因此我假设该令牌未作为标头添加。这是我用来附加标题的代码：

import axios from 'axios';
import store from '../store';

const apiCall = axios.create();

apiCall.interceptors.request.use(
  config => {
    if (store.getters.isAuthenticated) {
      // Take the token from the state and attach it to the request's headers
      config.headers.Authorization = `JWT ${store.getters.getToken}`;
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

export default apiCall;

这是我的开发依赖项：

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-plugin-pwa": "^3.0.5",
    "@vue/cli-plugin-unit-jest": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-airbnb": "^3.0.5",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.0.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  },

是否需要添加一些内容才能从移动设备devDependencies访问？Posts

标签： djangovue.jsjwtaxiosvuex