【DRF + Vue.js 】API取得時のエラーについて
はじめに
Vueのコンポーネント内から、DRFで作成したAPIを以下のようにaxiosなどで取得する際にエラーが発生した。
.../source/views/Mypage.vue
export default {
...
...
mounted() {
this.axios.get("/users/" + this.user_id).then(response => {
this.Person = response.data
})
}
};
発生したエラー
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.
VueからのXMLHttpRequestのアクセスがDRF側でブロックされているという感じの内容である。
CORSの設定を確認すると、以下の様にしっかり設定できている。
.../settings.py
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'http://localhost:8080',
'http://127.0.0.1:8080',
)
解決
リクエスト先のURLで最後に '/' をつけるのを忘れていた。
したがって、Vueのコンポーネントファイルを以下の様に修正すればよい。
.../source/views/Mypage.vue
export default {
...
...
mounted() {
// 最後に'/'を追加する
api.get("/users/" + this.user_id + '/').then(response => {
this.Person = response.data
})
}
};
Author And Source
この問題について(【DRF + Vue.js 】API取得時のエラーについて), 我々は、より多くの情報をここで見つけました https://qiita.com/taki_21/items/3f0d3bd0e71a47b7d5ac著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .