Django Vue.js GET /ws HTTP/1.1 404 2292 error every second-CodePudding

I am building a project with Vue.js on the front-end and Django on the back-end. I am using port 8000 for Django and port 8080 for Vue.js. Every time I route to something on the 8080 port, I get this error like this that gets printed out every second:

[01/Apr/2022 17:18:57] "GET /ws HTTP/1.1" 404 2292
Not Found: /ws

This is my vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '^/ws': {
        target: 'http://localhost:8000'
      }
    }
  }
})

Here is the Django urls.py:

urlpatterns = [
    path('favicon.ico', include('django.contrib.staticfiles.urls')),
    path('admin/', admin.site.urls),
    path('api/', include('users.urls')),
    path('api/', include('leagues.urls')),
]

I can't figure out why this happens or how to fix it.

CodePudding user response：

In your proxy config, you probably want something like this:

      '^/ws': {
          target: 'localhost:8080',
      },

... basically, don't proxy the /ws path, send those requests to the devserver. Or maybe there is a common prefix for your django endpoints you can use to qualify paths that should be proxied.

CodePudding user response：

I found the solution to a similar way as Thomas. It seems that the default behavior of setting a proxy in vue.config.js is to send a GET request to /ws. I had to change the /ws in Thomas's answer to /api since that is what the back-end uses for their routes, so I ended up with this:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000'
      }
    }
  }
})