--- slug: "vue-js-webpack-dev-server-proxy-django-python-social-auth" title: "Using Vue.js Webpack Dev Server Proxy for Social Provider Authentication with Django + Python Social Auth" description: "When developing with Vue, if you are running a webpack dev server and using Django for the API backend along with Django's authentication using Python social auth and an external Auth provider, you may encounter an issue." url: "https://www.ytyng.com/en/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: "en" --- # Using Vue.js Webpack Dev Server Proxy for Social Provider Authentication with Django + Python Social Auth

When developing with Vue, if you are running a webpack dev server and using Django for the API backend along with Django's authentication using Python social auth and an external Auth provider, you may encounter an issue.

By default, the callback URL for the external provider authentication will be set to the port of the Django development server, which can prevent authentication from working properly.

In such cases, you can specify the port being requested to the webpack dev server using the X-Forwarded-For header in the webpack dev server settings as follows:

vue.config.js

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

In the Django settings, make sure to set USE_X_FORWARDED_HOST to True:

Django settings

USE_X_FORWARDED_HOST = True