Vue.js调用Okta API遇util._extend弃用警告及Vite代理错误求助

问题现象 #

通过CLI的cURL请求能正常调用部署在Okta的API，但Vue.js应用中调用时出现两个问题：

1. Vite代理连接错误（ECONNREFUSED）
2. util._extend弃用警告（DEP0060）

抛出的错误信息 #

(node:82171) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
7:45:24 PM [vite] http proxy error:

通过NODE_OPTIONS=--trace-deprecation npm run serve追踪警告来源，确认是Vite依赖内部代码导致：

(node:84741) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
    at ProxyServer.<anonymous> (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:56939:26)
    at viteProxyMiddleware (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:57226:23)
    at call (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44131:7)
    at next (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44075:5)
    at cors (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44599:7)
    at /Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44635:17)
    at originCallback (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44625:15)
    at /Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44630:13)
    at optionsCallback (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44610:9)
    at corsMiddleware (/Users/rami-dev/Documents/Pizza42Okta/02-Calling-an-API/node_modules/vite/dist/node/chunks/dep-0a035c79.js:44615:7)
8:03:38 PM [vite] http proxy error: AggregateError [ECONNREFUSED]:
    at internalConnectMultiple (node:net:1117:18)
    at afterConnectMultiple (node:net:1684:7)

相关代码文件 #

ExternalAPI.vue #

<template>
  <div>
    <div class="mb-5">
      <h1>External API</h1>
      <p>
        Call an external API by clicking the button below. This will call the
        external API using an access token, and the API will validate it using
        the API's audience value.
      </p>

      <button class="btn btn-primary mt-5" @click="callApi">Call API</button>
    </div>

    <div class="result-block-container">
      <div :class="['result-block', apiMessage ? 'show' : '']">
        <h6 class="muted">Result</h6>
        <highlightjs language="json" :code="JSON.stringify(apiMessage, null, 2) || ''" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useAuth0 } from "@auth0/auth0-vue";
import { ref } from "vue";

export default {
  name: "api-view",
  setup() {
    const auth0 = useAuth0();
    const apiMessage = ref();

    return {
      apiMessage,
      async callApi() {
        // Get the access token from Auth0
        const accessToken = await auth0.getAccessTokenSilently();

        try {
          // Call the external API with the access token
          const response = await fetch("/api/external", {
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          });

          // Parse the response as JSON
          const data = await response.json();

          // Store the API response in the apiMessage variable
          apiMessage.value = data;
        } catch (e: any) {
          // Handle any errors that occur during the API call
          apiMessage.value = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
        }
      },
    };
  },
};
</script>

vite.config.js #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3001',
    }
  },
  plugins: [vue()]
})

解决方法 #

1. 修复Vite代理连接错误（ECONNREFUSED） #

• 修正代理目标地址：当前代理指向http://localhost:3001，但API实际部署在Okta远程服务器，需替换为Okta API的真实域名，并开启跨域适配：

  proxy: {
    '/api': {
      target: 'https://your-okta-api-domain.com', // 替换为实际的Okta API地址
      changeOrigin: true, // 必须开启，避免跨域验证失败
      rewrite: (path) => path.replace(/^\/api/, '') // 若API路径不含/api前缀，添加此规则
    }
  }
  

• 验证服务状态：如果API确实部署在本地3001端口，先确认该端口的服务是否正常启动，可通过curl http://localhost:3001/api/external测试连通性。

2. 解决util._extend弃用警告 #

• 更新Vite到最新稳定版：该警告来自Vite依赖内部的过时API调用，更新版本即可从根源解决：

  npm install vite@latest
  

• 临时屏蔽警告（不推荐）：若暂时无法更新，可在启动命令中添加参数忽略该警告，修改package.json的scripts：

  "scripts": {
    "serve": "NODE_OPTIONS='--no-warnings=DEP0060' vite"
  }
  

内容的提问来源于stack exchange，提问作者ramonz000