When I set up the proxy in Vite, it redirects me to the specified proxy URL on my local server. I specifically intend to utilize it solely for making API

Below is my Vite configuration file vite.config.ts:

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true
  },
  plugins: [
    vue({
      template: {
        transformAssetUrls
      }
    }),
    quasar({
      sassVariables: 'src/assets/scss/quasar-variables.sass'
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src'),
    },
  },
  server: {
    proxy: {
      '/socket': {
        target: 'wss://abc-website.com:4221/',
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace('^/socket', ''),
      },
      '/streaming/': {
        target: 'https://abc-website.com/',
        changeOrigin: true,
      },
      '/': {
        target: 'https://abc-website.com/',
        changeOrigin: true,
        secure: false,
        ws: true
      },
    }
  }
})

When I load my application, it redirects me to from my localhost port.

I specifically want to use the above URL only for backend API calls such as .

After setting the proxy in vite.config.ts, I also configured the baseURL to "api/". However, after this adjustment, the REST API calls are made to https://localhost:3000/auth instead of https://localhost:3000/api/auth.

It seems like the Vite proxy feature is not working correctly for me.

Answer №1

One potential solution could look like this:

server: {
  proxy: {
    // ... your other proxies
    '/api': {
      target: 'https://xyz-website.com/',
      changeOrigin: true,
      secure: false,
      ws: true,
      rewrite: (path) => path.replace(/^\/app/, ''),
    },
  }
}

This configuration will redirect requests from localhost:3000/api/my-endpoint to

https://xyz-website.com/my-endpoint
. Keep in mind that not all requests can be proxied, as some are reserved for serving assets like index.html files. However, I'm happy to assist further.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In TypeScript, if all the keys in an interface are optional, then not reporting an error when an unexpected field is provided

Why doesn't TypeScript report an error when an unexpected field is provided in an interface where all keys are optional? Here is the code snippet: // This is an interface which all the key is optional interface AxiosRequestConfig { url?: string; m ...

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

Proper method for validating Jwt

Below is the code I have composed: jwt.verify(token.split(':')[1], 'testTest') I am attempting to verify this code in order for it to return true and proceed. The jwt being mentioned here serves as an example payload. Any suggestions ...

Numerous VueSelect instances

After fetching data from an API to populate a v-select component, the component gets filled correctly and also includes options that were previously assigned by the user (multiple) https://i.sstatic.net/Xp23F.png The v-select component is successfully po ...

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

Interactive KML layer in ArcGIS mapping tool

Currently, I am working on enhancing an ArcGIS map by incorporating KML layers for interactivity. This is a simplified version of the code I am currently using: map = new Map("map", { basemap: "topo", center: [-108.663, 42.68], zoom: 6 }); parser.p ...

Saving numerous files with Promises

There is a Node URL (created using Express) that enables users to download static images of addresses. The calling application sends a request to the /download URL with multiple addresses in JSON format. The download service then calls Google Maps to save ...

Guide to creating a Map with typescript

I've noticed that many people are converting data to arrays using methods that don't seem possible for me. I'm working with React and TypeScript and I have a simple map that I want to render as a list of buttons. Here is my current progres ...

Having difficulty displaying an image in vue.js

In my current vue.js project, I am experimenting with dynamically generating images using a simple method: methods: { getImg(image, ext) { return '~@/assets/images/' + image + '.' + ext; }, ... Each component wit ...

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

Are you receiving a response code 500 when making a request to a presigned URL?

I've been encountering an issue with generating presigned URLs for files from my S3 bucket. Although I can successfully read files and obtain a list of file contents, when attempting to create a presigned URL using the following code snippet: reports ...

Unable to access object key data from JSON-SERVER

I am currently attempting to send a GET request to json-server in order to retrieve data from a nested object. However, the response I am receiving is empty instead of containing the desired data key. After thoroughly reviewing the documentation, I could ...

Ways to disable an AJAX loading animation

In my current script, I am loading external content using the following code: <script type="text/javascript"> var http_request = false; function makePOSTRequest(url, parameters) { // Code for making POST request } function alertContents() { ...

When processing UTF-8, REST only acknowledges English characters and ignores any other characters

When sending an AJAX request in UTF8 to a server that uses REST, any part that contains non-English characters is disregarded. I am working with Java on the server side with REST, and the client sends AJAX requests in UTF8 that may include Hebrew words. ...

Having trouble connecting angular repository data with promise

I have been trying to implement the repository pattern in my Angular application. I can see that the JSON data is successfully retrieved over the network when I call my repository, but I am facing issues with binding it to my view. I have injected the rep ...

Combining multiple arrays in Node.js to create a single JSON file

I'm exploring the world of nodejs and currently working on creating a Json parser that will pull data from a Json API, allow me to access specific data points (some of which will need transforming), and then save it to a Json file. I recently came ac ...

How do I correctly pair Vue.js routes that contain query strings?

While browsing, I came across this: https://router.vuejs.org/en/essentials/dynamic-matching.html However, it seems that I cannot match something like: /mycoolapp?someid=123 Yes, I could achieve /mycoolapp/123 But that's not what I'm looking ...

React.js: The specified element type is not valid:

I am currently working on a sample project using react.js in Visual Studio 2019 Here is my Index.js file: import 'bootstrap/dist/css/bootstrap.css'; import React from 'react'; import ReactDOM from 'react-dom'; import { Provi ...

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...

Error: Unable to access the lexical declaration 'useStyles' before it has been initialized in the React Collapse Component. This issue occurred while trying to fetch data using axios in the Material-

I am facing an issue while trying to display data fetched from the backend (array with objects) and hide a portion of it under a collapsible button using Material-UI in React. The code works perfectly when all lines are written within a single component ca ...