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'。

開始以爲代理配置、接口封裝有問題，各種姿勢嘗試依然沒有解決。正當心力交瘁、頭痛欲裂、走投無路之時，🤣🤣這個端口號是不是有問題！換一個試試呢？於是改了一下端口號，改成“8082”正常❗改成“9000”正常❗❗❗

這是爲什麼呢？--端口占用

命令行中執行“netstat -nao | findstr 3000”查一下端口占用，果然發現確實有多個程序佔用了本地3000端口號

• 其中PID=31336的進程node，這個是啓動express的。
• PID=2448的進程，通過任務管理器的“詳細信息”找到爲VSCode，就是他。

但VSCode本身應該不會使用端口啊，難道是插件？

在VSCode的設置中搜索“port”關鍵字看看，果然有一個插件“Live Preview”的端口號就是3000。Live Preview是一個預覽本地網頁的一個插件，終於找到根源了。

驗證一下

修改Live Preview”的端口號，或者關閉該插件後，重新啓用3000端口號，跨域代理訪問正常！

---

©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀