During the execution of a call API request, the Vue.JS application encountered an error. The API is hosted at Okta, and the request is successful when using cURL in the CLI.
Error Message
(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:
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>
Viteconfig.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()]
})
I attempted to update the npm packages and locate where the util.\_extend (API) is being used. This line is not found in any of the files, suggesting it may be within an imported library that I am utilizing.
When running the application with trace deprecation, it leads me to this
**NODE_OPTIONS=--trace-deprecation npm run serve**
(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)