Implement cookie-based JWT authentication

- Introduced `CookieJWTAuthentication` for authentication via HttpOnly cookies, enabling browser-initiated requests without `Authorization` headers.
- Added authentication views (`CookieTokenObtainPairView`, `CookieTokenRefreshView`, `CookieTokenBlacklistView`) to replace default SimpleJWT views.
- Updated Vuex store and frontend logic to handle sessions using HttpOnly cookies instead of localStorage.
- Enhanced backend and frontend configurations (Django settings, router, Vuex, and API service) to fully support cookie-based authentication.
- Updated authentication tests to ensure correct cookie handling and authentication flows.

cbreader/settings/base.py

@@ -231,11 +231,24 @@ REST_FRAMEWORK = {
     ],
     'DEFAULT_AUTHENTICATION_CLASSES': (
         'rest_framework_simplejwt.authentication.JWTAuthentication',
+        'comic.auth.CookieJWTAuthentication',
         'rest_framework.authentication.SessionAuthentication',
     )
 }
 
 CORS_ALLOW_ALL_ORIGINS = True
+# Cookie based JWT authentication (see comic/auth.py). Tokens are stored in HttpOnly
+# cookies so that browser initiated requests, such as the page images in the reader,
+# can be authenticated - an <img> tag cannot send an Authorization header.
+JWT_ACCESS_COOKIE_NAME = os.getenv('JWT_ACCESS_COOKIE_NAME', 'access_token')
+JWT_REFRESH_COOKIE_NAME = os.getenv('JWT_REFRESH_COOKIE_NAME', 'refresh_token')
+JWT_COOKIE_PATH = os.getenv('JWT_COOKIE_PATH', '/')
+# Only mark the cookies Secure when the site is actually served over HTTPS, otherwise
+# browsers drop them on plain http.
+JWT_COOKIE_SECURE = os.getenv('JWT_COOKIE_SECURE', 'False') == 'True'
+# Lax blocks cross-site POSTs, which is the CSRF protection for cookie authentication.
+JWT_COOKIE_SAMESITE = os.getenv('JWT_COOKIE_SAMESITE', 'Lax')
+
 SIMPLE_JWT = {
     "ROTATE_REFRESH_TOKENS": True,
     "BLACKLIST_AFTER_ROTATION": True,

cbreader/urls.py

@@ -25,9 +25,7 @@ from rest_framework import permissions
 from rest_framework.routers import DefaultRouter
 
 # from rest_framework_extensions.routers import ExtendedDefaultRouter
-from rest_framework_simplejwt.views import TokenBlacklistView, TokenObtainPairView, TokenRefreshView
-
-from comic import feeds, rest
+from comic import auth_views, feeds, rest
 
 schema_view = get_schema_view(
     openapi.Info(
@@ -61,9 +59,9 @@ urlpatterns = [
     re_path(r'^swagger\.(?P<format>json|yaml)$', schema_view.without_ui(cache_timeout=0), name='schema-json'),
     re_path(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
     re_path(r'^redoc/$', schema_view.with_ui('redoc', cache_timeout=0), name='schema-redoc'),
-    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
-    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
-    path('api/token/blacklist/', TokenBlacklistView.as_view(), name='token_blacklist'),
+    path('api/token/', auth_views.CookieTokenObtainPairView.as_view(), name='token_obtain_pair'),
+    path('api/token/refresh/', auth_views.CookieTokenRefreshView.as_view(), name='token_refresh'),
+    path('api/token/blacklist/', auth_views.CookieTokenBlacklistView.as_view(), name='token_blacklist'),
     path('api/', include(router.urls)),
     path("",
          TemplateView.as_view(template_name="application.html"),

comic/auth.py

@@ -0,0 +1,66 @@
+"""Cookie based JWT authentication.
+
+Tokens are kept in HttpOnly cookies rather than in JavaScript storage. That is
+what makes browser initiated requests work: an `<img>` tag cannot send an
+`Authorization` header, so protected page images can only be served through
+cookie authentication.
+
+The views live in comic/auth_views.py: importing rest_framework.views here would
+resolve DEFAULT_AUTHENTICATION_CLASSES while this module is still being imported.
+"""
+
+from typing import Any
+
+from django.conf import settings
+from rest_framework.request import Request
+from rest_framework.response import Response
+from rest_framework_simplejwt.authentication import AUTH_HEADER_TYPES, JWTAuthentication
+
+
+def access_cookie_name() -> str:
+    return settings.JWT_ACCESS_COOKIE_NAME
+
+
+def refresh_cookie_name() -> str:
+    return settings.JWT_REFRESH_COOKIE_NAME
+
+
+def _cookie_options() -> dict[str, Any]:
+    return {
+        'httponly': True,
+        'secure': settings.JWT_COOKIE_SECURE,
+        'samesite': settings.JWT_COOKIE_SAMESITE,
+        'path': settings.JWT_COOKIE_PATH,
+    }
+
+
+def set_auth_cookies(response: Response, tokens: dict[str, Any]) -> None:
+    """Write the access and refresh tokens into HttpOnly cookies."""
+    simple_jwt = settings.SIMPLE_JWT
+    for name, token, lifetime in (
+        (access_cookie_name(), tokens.get('access'), simple_jwt['ACCESS_TOKEN_LIFETIME']),
+        (refresh_cookie_name(), tokens.get('refresh'), simple_jwt['REFRESH_TOKEN_LIFETIME']),
+    ):
+        if token:
+            response.set_cookie(name, token, max_age=int(lifetime.total_seconds()), **_cookie_options())
+
+
+def clear_auth_cookies(response: Response) -> None:
+    for name in (access_cookie_name(), refresh_cookie_name()):
+        response.delete_cookie(name, path=settings.JWT_COOKIE_PATH)
+
+
+class CookieJWTAuthentication(JWTAuthentication):
+    """Authenticate from the Authorization header, or from the access cookie.
+
+    Keeping the header path means API clients that send a bearer token still work.
+    """
+
+    def get_header(self, request: Request) -> bytes | None:
+        header = super().get_header(request)
+        if header:
+            return header
+        token = request.COOKIES.get(access_cookie_name())
+        if not token:
+            return None
+        return f'{AUTH_HEADER_TYPES[0]} {token}'.encode()

comic/auth_views.py

@@ -0,0 +1,72 @@
+"""Token views that store JWTs in HttpOnly cookies (see comic/auth.py)."""
+
+from rest_framework import status
+from rest_framework.exceptions import AuthenticationFailed
+from rest_framework.request import Request
+from rest_framework.response import Response
+from rest_framework_simplejwt.exceptions import TokenError
+from rest_framework_simplejwt.serializers import TokenBlacklistSerializer, TokenRefreshSerializer
+from rest_framework_simplejwt.views import TokenObtainPairView
+
+from comic.auth import clear_auth_cookies, refresh_cookie_name, set_auth_cookies
+
+
+def _refresh_value(request: Request) -> str | None:
+    """The refresh token from the request body, or from the refresh cookie."""
+    value = request.data.get('refresh') if isinstance(request.data, dict) else None
+    return value or request.COOKIES.get(refresh_cookie_name())
+
+
+class CookieTokenObtainPairView(TokenObtainPairView):
+    """Log in: issue tokens and store them in HttpOnly cookies."""
+
+    def post(self, request: Request, *args: object, **kwargs: object) -> Response:
+        response = super().post(request, *args, **kwargs)
+        if response.status_code == status.HTTP_200_OK and isinstance(response.data, dict):
+            set_auth_cookies(response, response.data)
+            # The tokens live in HttpOnly cookies, so they are not returned to JavaScript.
+            response.data = {}
+        return response
+
+
+class CookieTokenRefreshView(TokenObtainPairView):
+    """Refresh using the refresh cookie and update both cookies."""
+
+    serializer_class = TokenRefreshSerializer
+
+    def post(self, request: Request, *args: object, **kwargs: object) -> Response:
+        refresh = _refresh_value(request)
+        if not refresh:
+            return Response(status=status.HTTP_401_UNAUTHORIZED, data={'errors': 'No refresh token.'})
+
+        serializer = self.get_serializer(data={'refresh': refresh})
+        try:
+            serializer.is_valid(raise_exception=True)
+        except TokenError as exc:
+            raise AuthenticationFailed(exc.args[0]) from exc
+
+        response = Response(status=status.HTTP_200_OK)
+        set_auth_cookies(response, serializer.validated_data)
+        # Keep the cookies out of the body so JavaScript never sees the tokens.
+        return response
+
+
+class CookieTokenBlacklistView(TokenObtainPairView):
+    """Log out: blacklist the refresh cookie and clear both cookies."""
+
+    serializer_class = TokenBlacklistSerializer
+
+    def post(self, request: Request, *args: object, **kwargs: object) -> Response:
+        refresh = _refresh_value(request)
+        if not refresh:
+            return Response(status=status.HTTP_401_UNAUTHORIZED, data={'errors': 'No refresh token.'})
+
+        serializer = self.get_serializer(data={'refresh': refresh})
+        try:
+            serializer.is_valid(raise_exception=True)
+        except TokenError as exc:
+            raise AuthenticationFailed(exc.args[0]) from exc
+
+        response = Response(status=status.HTTP_204_NO_CONTENT)
+        clear_auth_cookies(response)
+        return response

comic/tests/test_auth.py

@@ -0,0 +1,87 @@
+"""Tests for cookie based JWT authentication."""
+
+import json
+
+import pytest
+from django.test import Client
+
+from comic import auth
+
+CREDENTIALS = {'username': 'reader', 'password': 'password12345'}
+
+
+def _store_cookies(client: Client, response) -> None:
+    """Copy Set-Cookie headers into the test client, which does not do it itself."""
+    for name, morsel in response.cookies.items():
+        if morsel.value:
+            client.cookies[name] = morsel.value
+        elif name in client.cookies:
+            del client.cookies[name]
+
+
+@pytest.mark.django_db
+def test_login_sets_http_only_cookies(client: Client, reader_user) -> None:
+    response = client.post('/api/token/', CREDENTIALS)
+    assert response.status_code == 200
+    # The tokens are not returned to JavaScript, only stored as cookies.
+    assert json.loads(response.content) == {}
+    for name in (auth.access_cookie_name(), auth.refresh_cookie_name()):
+        assert response.cookies[name].value
+        assert response.cookies[name]['httponly']
+
+
+@pytest.mark.django_db
+def test_a_cookie_authenticates_a_request(client: Client, reader_user) -> None:
+    _store_cookies(client, client.post('/api/token/', CREDENTIALS))
+    response = client.get('/api/account/')
+    assert response.status_code == 200
+    assert json.loads(response.content)['username'] == reader_user.username
+
+
+@pytest.mark.django_db
+def test_anonymous_request_without_a_cookie_is_rejected(client: Client) -> None:
+    assert client.get('/api/account/').status_code == 401
+
+
+@pytest.mark.django_db
+def test_the_authorization_header_still_works(client: Client, reader_user) -> None:
+    response = client.post('/api/token/', CREDENTIALS)
+    token = response.cookies[auth.access_cookie_name()].value
+    response = client.get('/api/account/', headers={'Authorization': f'Bearer {token}'})
+    assert response.status_code == 200
+
+
+@pytest.mark.django_db
+def test_refresh_rotates_the_access_cookie(client: Client, reader_user) -> None:
+    _store_cookies(client, client.post('/api/token/', CREDENTIALS))
+    old_access = client.cookies[auth.access_cookie_name()].value
+    old_refresh = client.cookies[auth.refresh_cookie_name()].value
+
+    response = client.post('/api/token/refresh/', {})
+    assert response.status_code == 200
+    _store_cookies(client, response)
+    assert client.cookies[auth.access_cookie_name()].value != old_access
+    assert client.cookies[auth.refresh_cookie_name()].value != old_refresh
+
+    # The rotated refresh token is blacklisted, so the original one no longer works.
+    assert client.post('/api/token/refresh/', {'refresh': old_refresh}).status_code == 401
+
+
+@pytest.mark.django_db
+def test_blacklisting_clears_the_cookies(client: Client, reader_user) -> None:
+    _store_cookies(client, client.post('/api/token/', CREDENTIALS))
+    response = client.post('/api/token/blacklist/', {})
+    assert response.status_code == 204
+    _store_cookies(client, response)
+
+    for name in (auth.access_cookie_name(), auth.refresh_cookie_name()):
+        assert name not in client.cookies
+
+    assert client.get('/api/account/').status_code == 401
+
+
+@pytest.mark.django_db
+def test_page_images_can_be_loaded_with_a_cookie(client: Client, book, reader_user) -> None:
+    """Browser initiated requests cannot send a header, so they rely on the cookie."""
+    _store_cookies(client, client.post('/api/token/', CREDENTIALS))
+    assert client.get(f'/api/read/{book.selector}/image/1/').status_code == 200

frontend/src/api/index.js

@@ -1,47 +1,15 @@
 import axios from "axios";
 import router from "@/router";
 import store from "@/store";
-import { jwtDecode } from "jwt-decode";
 
-/**
- * Gets a valid access token or refreshes if needed
- * Uses a consistent 5-minute threshold for token expiration
- */
-async function get_access_token() {
-    // If we don't have tokens in the store, return null
-    if (!store.state.jwt || !store.state.jwt.access) {
-        return null;
-    }
+// Authentication is cookie based: the browser sends the HttpOnly access token
+// automatically, so there is no Authorization header to set here.
+const axios_jwt = axios.create({ withCredentials: true });
 
-    try {
-        const access = jwtDecode(store.state.jwt.access);
-        const now = Date.now() / 1000;
-        const refreshThreshold = 300; // 5 minutes in seconds
-
-        // If token is about to expire, refresh it
-        if (access.exp - now < refreshThreshold) {
-            try {
-                // Wait for the token to refresh
-                await store.dispatch('refreshToken');
-                return store.state.jwt.access;
-            } catch (error) {
-                console.error('Failed to refresh token:', error);
-                return null;
-            }
-        }
-
-        return store.state.jwt.access;
-    } catch (error) {
-        console.error('Error decoding token:', error);
-        return null;
-    }
-}
-
-const axios_jwt = axios.create();
-
-// Add CSRF token to all requests if using cookies for authentication
+// Add the CSRF header if a csrftoken cookie exists. Cookie authentication is
+// protected against cross-site form posts by SameSite=Lax, so this is only used
+// when the backend does set the cookie.
 axios_jwt.interceptors.request.use(function(config) {
-    // Get CSRF token from cookie if it exists
     const csrfToken = document.cookie
         .split('; ')
         .find(row => row.startsWith('csrftoken='))
@@ -54,26 +22,32 @@ axios_jwt.interceptors.request.use(function(config) {
     return config;
 });
 
-// Add JWT token to all requests
-axios_jwt.interceptors.request.use(async function (config) {
-    const access_token = await get_access_token();
+// A 401 means the access cookie is no longer valid. Try to refresh it once; if
+// that fails the session is gone, so log out and send the user to the login page.
+axios_jwt.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+        const config = error.config;
 
-    if (access_token) {
-        config.headers.Authorization = "Bearer " + access_token;
-    } else if (!router.currentRoute.value.fullPath.includes('login')) {
-        // Only redirect if we're not already on the login page
+        if (error.response?.status === 401 && config && !config._retried && !config.url.includes('/token/')) {
+            config._retried = true;
+            try {
+                await store.dispatch('refreshToken');
+                return await axios_jwt.request(config);
+            } catch {
+                store.commit('logOut');
                 router.push({
                     name: 'login',
                     query: {
-                next: router.currentRoute.value.fullPath,
-                error: 'Please log in to continue'
+                        next: config.url,
+                        error: 'Your session has expired. Please log in again.'
                     }
                 });
             }
+        }
 
-    return config;
-}, function (error) {
         return Promise.reject(error);
-});
+    }
+);
 
 export default axios_jwt

frontend/src/components/TheNavbar.vue

@@ -51,12 +51,12 @@ export default {
   },
   computed: {
     isAuthenticated() {
-      return !!this.$store.state.jwt;
+      return this.$store.getters.isAuthenticated;
     }
   },
   methods: {
     logout () {
-      store.commit('logOut')
+      store.dispatch('logout')
       router.push({name: 'login'})
     }
   }

frontend/src/main.js

@@ -21,9 +21,14 @@ library.add(faBook, faBookOpen, faEdit, faTurnUp, faTimes, faCheck)
 import router from './router'
 import store from './store'
 
-Vue.createApp(App)
+const app = Vue.createApp(App)
     .use(ToastPlugin)
     .use(store)
     .use(router)
     .component('font-awesome-icon', FontAwesomeIcon)
-    .mount('#app')
+
+// Validate the cookie before the first navigation, so the router guards see the
+// real session instead of whatever is left in localStorage.
+store.dispatch('restoreSession').finally(() => {
+    app.mount('#app')
+})

frontend/src/router/index.js

@@ -11,7 +11,7 @@ const HistoryView = () => import('@/views/HistoryView')
 
 // Navigation guard to check if user is authenticated
 function requireAuth(to, from, next) {
-  if (!store.state.jwt) {
+  if (!store.getters.isAuthenticated) {
     next({
       name: 'login',
       query: { next: to.fullPath, error: 'Please log in to access this page' }
@@ -23,7 +23,7 @@ function requireAuth(to, from, next) {
 
 // Navigation guard to check if user is admin
 function requireAdmin(to, from, next) {
-  if (!store.state.jwt || !store.getters.is_superuser) {
+  if (!store.getters.isAuthenticated || !store.getters.is_superuser) {
     next({
       name: 'login',
       query: { next: to.fullPath, error: 'Admin access required' }

frontend/src/store/index.js

@@ -1,16 +1,11 @@
 import { createStore } from 'vuex'
-import axios from 'axios'
-import { jwtDecode } from "jwt-decode";
 import {useToast} from "vue-toast-notification";
 import router from "@/router";
 import api from "@/api";
 
-// We'll no longer use localStorage for tokens
-// Instead, tokens will be stored in httpOnly cookies by the backend
-// and automatically included in requests
-function get_jwt_from_storage(){
-  return null; // Initial state will be null until login
-}
+// Tokens live in HttpOnly cookies set by the backend, so JavaScript cannot read
+// them. Only the user profile is kept in localStorage, to avoid a blank page
+// before the first request has been made.
 function get_user_from_storage(){
   try {
     return JSON.parse(localStorage.getItem('u'))
@@ -19,9 +14,18 @@ function get_user_from_storage(){
   }
 }
 
+function session_expired_query(next){
+  return {
+    name: 'login',
+    query: {
+      next: next,
+      error: 'Your session has expired. Please log in again.'
+    }
+  }
+}
+
 export default createStore({
   state: {
-    jwt: get_jwt_from_storage(),
     filters: {},
     user: get_user_from_storage(),
     classifications: [
@@ -39,23 +43,14 @@ export default createStore({
       } else {
         return state.user.is_superuser
       }
+    },
+    isAuthenticated (state) {
+      return state.user !== null
     }
   },
   mutations: {
-    updateToken(state, newToken){
-      // No longer storing tokens in localStorage
-      // Tokens are stored in httpOnly cookies by the backend
-      state.jwt = newToken;
-    },
     logOut(state){
-      // Clear user data from localStorage
       localStorage.removeItem('u')
-      // Clear state
-
-      // Make a request to the backend to invalidate the token
-      axios.post('/api/token/blacklist/', { refresh: state.jwt?.refresh })
-        .catch(error => console.error('Error blacklisting token:', error));
-      state.jwt = null;
       state.user = null
     },
     updateUser(state, userData){
@@ -69,95 +64,77 @@ export default createStore({
         username: username,
         password: password
       }
-      axios.post('/api/token/', payload)
+      // The response body is empty: the backend stores the tokens as HttpOnly cookies.
+      api.post('/api/token/', payload)
+        .then(() => api.get('/api/account'))
         .then((response) => {
-            context.commit('updateToken', response.data);
-            api.get('/api/account').then(response => {
           context.commit('updateUser', response.data)
-            })
           if ('next' in router.currentRoute.value.query) {
             router.push(router.currentRoute.value.query.next)
           } else {
             router.push('browse')
           }
-
         })
         .catch((error) => {
           const $toast = useToast();
-            if (error.response.data.detail) {
-              $toast.error(error.response.data.detail, {position:'top'});
+          const data = error.response?.data ?? {};
+          if (data.detail) {
+            $toast.error(data.detail, {position:'top'});
           }
-            if (error.response.data.username) {
-              $toast.error("Username: " + error.response.data.username, {position:'top'});
+          if (data.username) {
+            $toast.error("Username: " + data.username, {position:'top'});
           }
-            if (error.response.data.password) {
-              $toast.error("Password: " + error.response.data.password, {position:'top'});
+          if (data.password) {
+            $toast.error("Password: " + data.password, {position:'top'});
           }
-
         })
     },
     refreshToken(){
-      // Don't attempt to refresh if we don't have a token
-      if (!this.state.jwt || !this.state.jwt.refresh) {
-        return Promise.reject(new Error('No refresh token available'));
+      if (!this.state.user) {
+        return Promise.reject(new Error('Not logged in'));
       }
 
-      const payload = {
-        refresh: this.state.jwt.refresh
-      }
-
-      return axios.post('/api/token/refresh/', payload)
-        .then((response) => {
-          this.commit('updateToken', response.data);
-          return response.data;
-        })
+      // The refresh token is read from the cookie by the backend.
+      return api.post('/api/token/refresh/', {})
+        .then((response) => response.data)
         .catch((error) => {
           console.error('Token refresh failed:', error);
-          // If refresh fails, log the user out and redirect to login
           this.commit('logOut');
-          router.push({
-            name: 'login',
-            query: {
-              next: router.currentRoute.value.fullPath,
-              error: 'Your session has expired. Please log in again.'
-            }
-          });
+          router.push(session_expired_query(router.currentRoute.value.fullPath));
           return Promise.reject(error);
         });
     },
-    inspectToken(){
-      const token = this.state.jwt;
-      if (!token) return;
-
-      try {
-        // For access token
-        const decoded = jwtDecode(token.access);
-        const exp = decoded.exp;
-        const now = Date.now() / 1000;
-
-        // Refresh when token is within 5 minutes of expiring
-        const refreshThreshold = 300; // 5 minutes in seconds
-
-        if (exp - now < refreshThreshold) {
-          // Token is about to expire, refresh it
-          this.dispatch('refreshToken');
-        } else if (exp < now) {
-          // Token is already expired, force logout
-          this.commit('logOut');
-          router.push({
-            name: 'login',
-            query: {
-              next: router.currentRoute.value.fullPath,
-              error: 'Your session has expired. Please log in again.'
+    // Check that the cookie still identifies the user stored in localStorage.
+    restoreSession(){
+      if (!this.state.user) {
+        return Promise.resolve(null);
       }
-          });
-        }
-      } catch (error) {
-        console.error('Error inspecting token:', error);
-        // If we can't decode the token, log the user out
+
+      return api.get('/api/account')
+        .then((response) => {
+          this.commit('updateUser', response.data);
+          return response.data;
+        })
+        .catch((error) => {
+          if (error.response?.status === 401) {
             this.commit('logOut');
             router.push({ name: 'login' });
           }
+          return null;
+        });
+    },
+    logout(){
+      const wasLoggedIn = this.state.user !== null;
+      this.commit('logOut');
+
+      if (!wasLoggedIn) {
+        return Promise.resolve(null);
+      }
+
+      return api.post('/api/token/blacklist/', {})
+        .catch((error) => {
+          console.error('Error blacklisting token:', error);
+        });
     }
   },
   modules: {

frontend/webpack.dev.js

@@ -3,6 +3,11 @@ const { VueLoaderPlugin } = require('vue-loader')
 const BundleTracker = require('webpack-bundle-tracker');
 const webpack = require('webpack')
 
+// The dev server port. Keep this and the publicPath in sync - django-webpack-loader
+// builds the script URL from the publicPath written into webpack-stats.json.
+const DEV_PORT = process.env.DEV_PORT || 8001
+const DEV_PUBLIC_PATH = `http://localhost:${DEV_PORT}/`
+
 module.exports = () => {
   return {
 
@@ -11,6 +16,7 @@ module.exports = () => {
     entry: path.resolve(__dirname, './src/main.js'),
     output: {
       path: path.resolve(__dirname, './dist/bundles/'),
+      publicPath: DEV_PUBLIC_PATH,
     },
     module: {
       rules: [
@@ -47,7 +53,7 @@ module.exports = () => {
       new BundleTracker({
         filename: 'webpack-stats.json',
         path: path.resolve(__dirname, './'),
-        publicPath: 'http://localhost:8080/'
+        publicPath: DEV_PUBLIC_PATH
       }),
       new webpack.DefinePlugin({
         'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
@@ -55,6 +61,7 @@ module.exports = () => {
       new webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true }),
     ],
     devServer: {
+      port: DEV_PORT,
       headers: {
         "Access-Control-Allow-Origin":"*"
       },