0

我有Vue.js PWA一个Django Rest Framework后端可以在我的笔记本电脑上本地正常工作（使用浏览器）。当我将它部署到生产环境时，当我使用浏览器登录时它继续正常工作，但是当它作为 PWA 打开时无法登录（即：在手机上或保存在浏览器中的 PWA）。

这是我的登录代码：

      axios
        .post("/api/get-token/", user)
        .then(res => {
          localStorage.setItem('user-token', res.data.token);
          axios.defaults.headers.common['Authorization'] = res.data.token;
          commit(AUTH_SUCCESS, res.data);
          resolve(res);
        })
        .catch(err => {
          commit(AUTH_ERROR, err);
          reject(err);
        });

如前所述，通过浏览器登录时，一切都在本地和生产环境中运行。尝试使用 PWA 登录时出现问题。

尝试登录 PWA 时，我得到以下信息：

POST https://www.example.com/api/get-token/ 401 (Unauthorized)

对从服务器收到的错误进行控制台日志，我得到：

{
  detail: "Invalid token header. No credentials provided."
  __proto__: Object
  status: 401
  statusText: "Unauthorized"
  headers: {allow: "POST, OPTIONS", connection: "keep-alive", content-length: "59", content-type: "application/json", date: "Thu, 06 Feb 2020 15:00:11 GMT", …}
  config:
    url: "/api/get-token/"
    method: "post"
    data: "{"username":"test@example.com","password":"password"}"
    headers:
      Accept: "application/json, text/plain, */*"
      Authorization: "Token "
      Content-Type: "application/json;charset=utf-8"
   __proto__: Object
  transformRequest: [ƒ]
  transformResponse: [ƒ]
  timeout: 0
  adapter: ƒ (t)
  xsrfCookieName: "csrftoken"
  xsrfHeaderName: "X-CSRFToken"
  maxContentLength: -1
  validateStatus: ƒ (t)
}

在生产中，以下工作：

  1. 使用笔记本电脑或手机上的浏览器登录网站。
  2. 然后打开 PWA。这可以正常工作，我可以继续使用 PWA。

尝试使用 PWA 登录时出现的唯一问题。

4

2 回答 2

0

本地手机可以登录吗？我也遇到过这个问题，问题是前端和后端不在同一台主机上运行。这解决了我的问题：

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000'
      }
    }
  }
于 2020-02-06T15:18:17.760 回答
0

我最终弄清楚了这个问题。出于某种原因，在标题中发布了以下内容：Authorization: "Token ".

这真的很奇怪，因为使用登录时/api/get-token/不需要令牌，因为这是登录路线。此外，它可以在浏览器中完美运行。唯一的问题是从 PWA 尝试时。

无论如何，将标头更改为明确没有任何价值Authorization可解决以下问题：Authorization: ""

于 2020-02-10T13:36:40.083 回答