Using Vue.js Webpack Dev Server Proxy for Social Provider Authentication with Django + Python Social Auth
2019-03-15 00:19 (5 years ago)
ytyng
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
Comments