[PYTHON] [DRF + Vue.js] Erreur lors de l'acquisition de l'API (erreur générale)

introduction

Une erreur s'est produite lors de l'acquisition de l'API créée par DRF avec axios etc. à partir du composant Vue comme indiqué ci-dessous.

javascript:.../source/views/Mypage.vue

export default {
  ...
  ...
  mounted() {
    this.axios.get("/users/" + this.user_id).then(response => {
      this.Person = response.data
    })
  }
};

Erreur survenue

Access to XMLHttpRequest at 'http://127.0.0.1:8000/XXX/XXX/XXX' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Le contenu est que l'accès de XMLHttpRequest à partir de Vue est bloqué du côté DRF. Si vous vérifiez les paramètres CORS, vous pouvez voir que les paramètres sont les suivants.

python:.../settings.py

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080',
    'http://127.0.0.1:8080',
)

Solution

J'ai oublié d'ajouter un «/» à la fin de l'URL demandée. Par conséquent, le fichier composant de Vue doit être modifié comme suit.

javascript:.../source/views/Mypage.vue

export default {
  ...
  ...
  mounted() {
    //finalement'/'Ajouter
    api.get("/users/" + this.user_id + '/').then(response => {       
      this.Person = response.data
    })
  }
};