[PYTHON] [DRF + Vue.js] Fehler beim Erwerb der API (allgemeiner Fehler)

Einführung

Beim Abrufen der von DRF erstellten API aus der Vue-Komponente mit Axios usw. ist ein Fehler aufgetreten (siehe unten).

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

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

Fehler aufgetreten

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.

Der Inhalt ist, dass der Zugriff von XMLHttpRequest von Vue auf der DRF-Seite blockiert ist. Wenn Sie die CORS-Einstellungen überprüfen, sehen Sie, dass die Einstellungen wie folgt sind.

python:.../settings.py

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

Lösung

Ich habe vergessen, am Ende der angeforderten URL ein '/' einzufügen. Daher sollte die Komponentendatei von Vue wie folgt geändert werden.

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

export default {
  ...
  ...
  mounted() {
    //Schließlich'/'Hinzufügen
    api.get("/users/" + this.user_id + '/').then(response => {       
      this.Person = response.data
    })
  }
};