Vuejs 中的请求从 django rest-framework 后端返回与 Postman 不同的响应

Question

我一直在努力实施Twitch user authorization code flow。我正在努力获取从 django 后端生成的授权 url 并将其传递到我的 Vue 前端，以便用户可以打开用户授权页面。

Postman 完美地恢复了生成的 url 但是当我尝试在 Vue 中使用 Requests 做同样的事情时，它给了我一个完全不同的对象。

Object { _events: {…}, _eventsCount: 1, _maxListeners: undefined, uri: {…}, method: "POST", readable: true, writable: true, explicitMethod: true, _qs: {…}, _auth: {…}, … }
auth.js:37:12

这是 Postman returns

"{\"url\": \"https://id.twitch.tv/oauth2/authorize\", \"client_id\": \"xafkse7a6uyor8uisaet1ma36mrp9l\", \"response_type\": \"code\", \"grant_type\": \"token\", \"scope\": \"user_read\"}"

我不确定是什么原因造成的。下面是用于达到这一点的代码。

views.py

import json
import os
import requests
from django.http.response import JsonResponse
from rest_framework.decorators import api_view
from rest_framework import status

# get user access token
@api_view(['POST'])
def get_twitch_user_token_uri(request):
    endpoint = "https://id.twitch.tv/oauth2/authorize"

    token_url = {
        'url': endpoint,
        'client_id': settings['TWITCH_CLIENT_ID'],
        'response_type': 'code',
        'grant_type': 'token',
        'scope': 'user_read'
    }
    return JsonResponse(token_url , status=status.HTTP_200_OK)

Login.vue

methods: {
    login() {
      const authenticating = true;
      this.$store.dispatch("auth/get_twitch_user_token_uri", authenticating);
    }
  }

auth.js

const actions = {
  get_twitch_user_token_uri({ commit, state }) {
    commit(GET_TWITCH_TOKEN_URI);
    console.log(this.endpoint);
    return auth.twitch_token(this.endpoint)
      .then(({ data }) => commit(GET_TWITCH_TOKEN, data))
      .then(() => commit(GET_TWITCH_TOKEN_SUCCESS))
      .catch(() => commit(GET_TWITCH_TOKEN_FAILURE));
  },
}

const mutations = {
  [GET_TWITCH_TOKEN_URI](state) {
    const url = "http://localhost:8000/api/auth/login";
    state.authenticating = true;
    const r = request.post(url);
    this.endpoint = r;
  },
}

以上是从我的 django 后端请求 url 时开始发生错误的地方。我确定我忽略了一些我只是不知道为什么它会 return 错误的回应。

感谢任何帮助！谢谢。

Answer 1

与我调用请求并将数据从操作传递到突变的方式有关。

Login.vue

methods: {
    login() {
      this.$store.dispatch("auth/get_twitch_user_token_uri");
      // .then(() => this.$router.push("/"));
    }
  }

auth.js

const actions = {
  async get_twitch_user_token_uri({ commit }) {
    commit(GET_TWITCH_TOKEN_URI);
    const options = {
      method: 'POST',
      header: { 'Content-Type': 'application/json' },
    };
    try {
      const response = await fetch("http://localhost:8000/api/auth/login", options);
      const data = await response.json();
      console.log(data);
      commit(SET_TWITCH_TOKEN_URI, data);
      return commit(GET_TWITCH_TOKEN_URI_SUCCESS);
    } catch (e) {
      return commit(GET_TWITCH_TOKEN_URI_FAILURE);
    }
  },
}

const mutations = {
  [GET_TWITCH_TOKEN_URI](state) {
    state.authenticating = true;
  },
  [SET_TWITCH_TOKEN_URI](state, data) {
    state.endpoint = data;
  },
}

Vuejs 中的请求从 django rest-framework 后端返回与 Postman 不同的响应

Requests in Vuejs returning different response than Postman from django rest-framework backend

django

request

django-rest-framework

vue.js