--- slug: "vue-js-webpack-dev-server-proxy-django-python-social-auth" title: "Vue.js webpack dev server の Proxy で Django + Python social auth のソーシャルプロバイダ認証をする場合" description: "Vue で開発する際、webpack dev server を起動していて、API バックエンドに Django を使っていて、Django の認証に Python social auth + 外部 Auth プロバイダを使っているケース。" url: "https://www.ytyng.com/blog/vue-js-webpack-dev-server-proxy-django-python-social-auth" publish_date: "2019-03-14T15:19:17Z" created: "2019-03-14T15:19:17Z" updated: "2026-02-27T02:44:47.633Z" categories: ["Django", "PHP"] keywords: "" featured_image_url: "https://media.ytyng.com/resize/20230812/fccef48cf6a24c10b170f86af8917993.png.webp?width=768" has_video: false has_music: false video_urls: [] music_urls: [] lang: "ja" --- # Vue.js webpack dev server の Proxy で Django + Python social auth のソーシャルプロバイダ認証をする場合

Vue で開発する際、webpack dev server を起動していて、API バックエンドに Django を使っていて、Django の認証に Python social auth + 外部 Auth プロバイダを使っているケース。

そのままだと、外部プロバイダ認証時のコールバックURL が Django の検証サーバのポートになってしまうため、認証ができない。

その場合は、webpack dev server の設定で X-Forwarded-For で webpack dev server にリクエストしているポートを指定し、

vue.config.js

module.exports = {
    devServer: {
        proxy: [{
            context: ['/auth', '/accounts', '/admin'],
            target: 'http://localhost:8014',
            headers: {
                'X-Forwarded-For': 'http://localhost:8080'
            }
        }],
    },
};

Django の設定で USE_X_FORWARDED_HOST = True にする

Django settings

USE_X_FORWARDED_HOST = True