Vue跨域配置异常采坑：Request failed with status code 401

本地用Express作为服务端，前端Vue项目配置跨域代理，调用服务端api接口始终报错“Request failed with status code 401”。原来发现是端口3000被占用了，被VSCode的一个插件占用了，修改为其他端口解决。

具体解决过程记录一下。

后端、前端配置

Express服务端接口为3000，地址：http://localhost:3000

//加载组件
let express = require('express');
//创建一个服务端服务实例server
let server = new express();
//*****  配置端口，启用监听端口 *****/
server.listen(3000, err => {
  if (!err)
    console.log('服务器启动成功，地址：http://localhost:3000')
})

Vue前端在vue.config.js中配置跨域代理：

module.exports = defineConfig({
  transpileDependencies: true, //默认false，是否需要转译的第三方依赖
  publicPath: '/bookadmin/', //基本url，多用于指定子路径
  devServer: {
    proxy: {
      '/server': { //用 “/api” 代理 “http://localhost:3000”
        target: 'http://localhost:3000', //代理的目标
        changeOrigin: true,
        ws: true,
        pathRewrite: { '^/server': '' }
      }
    }
  },
})

Request failed with status code 401

接口访问接口报错：Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST'。

开始以为代理配置、接口封装有问题，各种姿势尝试依然没有解决。正当心力交瘁、头痛欲裂、走投无路之时，