Vue+Axios调用Django Rest Framework接口出现404错误求助

先给你理清一个关键点：你日志里看到的GET /sockjs-node/info... 404请求，不是Axios发起的业务接口请求，而是Vue开发服务器的热重载（HMR）机制在尝试建立WebSocket连接时触发的。这个日志只是开发环境的小插曲，真正导致你Axios请求失败的原因大概率是下面这些：

1. 检查Axios的请求配置是否正确 #

首先确保你的Axios请求指向了DRF的正确地址：

• 查看baseURL配置：比如DRF后端跑在http://localhost:8000/api/，那Axios的全局配置应该是这样的：

  import axios from 'axios';
  axios.defaults.baseURL = 'http://localhost:8000/api/';
  

• 核对请求路径：比如你调用axios.get('/users/')，要确认DRF的路由里确实存在/api/users/（注意大小写、末尾斜杠这些细节，DRF的路由对这些很敏感）。

2. 处理跨域问题（Vue和DRF不在同一端口时必做） #

如果你的Vue项目跑在localhost:8080，DRF跑在localhost:8000，浏览器的跨域策略会拦截请求，有时候也会表现为404错误（实际是跨域被阻止）。解决方法是给Django添加跨域支持：

• 安装django-cors-headers：

  pip install django-cors-headers
  

• 在settings.py中配置：

  # 添加到INSTALLED_APPS
  INSTALLED_APPS = [
      # 其他已有的app
      'corsheaders',
  ]
  
  # 把CorsMiddleware放到CommonMiddleware前面
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # 其他中间件
  ]
  
  # 允许Vue所在的域名跨域请求
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:8080",
      # 如果有其他环境地址也可以加在这里
  ]
  

3. 消除sockjs-node/info的404日志（可选） #

如果你看着这个日志不舒服，可以调整Vue开发服务器的配置来解决：

• 如果你用的是Vue CLI，在项目根目录创建vue.config.js（如果没有的话），添加：

  module.exports = {
    devServer: {
      client: {
        webSocketURL: 'ws://localhost:8080/ws'
      }
    }
  }
  

• 如果是Vite构建的项目，修改vite.config.js：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost'
      }
    }
  });
  

先按上面的步骤排查Axios和跨域的问题，应该就能解决你接口请求404的问题了。

内容的提问来源于stack exchange，提问作者Pedro Gabriel Lancelloti Pinto