Vite proxying with https doesn’t work

Explanation of the problem

The bug occurs when migrating an existing project from vue-cli to vite. The project has a vue-cli front-end and a back-end that only accepts secure HTTPS requests. A wildcard certificate for *.companydomain.org is used, and developers have updated their etc/hosts file to redirect the local URL to local.companydomain.org. This is necessary because the back-end only accepts HTTPS requests.

In the original vue.config.js file, all requests starting with “/” are proxied to the back-end server using http-proxy-middleware. This configuration worked fine with vue-cli, but when migrating to vite, proxying to the back-end server stopped working.

The corresponding vite.config.js file has been modified to use environment variables starting with “VUE_” and includes changes to the proxy configuration. However, the proxying functionality still doesn’t work.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Vite proxying with https doesn’t work

1. Update the vite.config.js file to properly configure the dev server and proxy settings. Make sure to replace the existing configuration with the following code:

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://localhost:8447',
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  }
})

2. In the main.js file, update the axios base URL configuration to match the proxy path. Replace the existing code with the following:

import axios from 'axios'

if (import.meta.env.DEV) {
  axios.defaults.baseURL = '/api'
}

3. Verify that the necessary environment variables are set correctly. Check the .env file and ensure that the variables VUE_ENV_HOST, VUE_ENV_PORT, VUE_ENV_HTTPS, VUE_ENV_PFX, and VUE_ENV_PFX_PASSPHRASE are defined with the appropriate values.
4. Restart the development server and test the application to see if the proxying issue has been resolved. Ensure that API requests are being properly proxied to the backend server.

By updating the configuration files, modifying the axios base URL, and verifying the environment variables, you should be able to solve the issue with proxying requests in the migrated Vite project.

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
    },
    extensions: ['.js', '.vue', '.json', '.scss'],
  },
})

import { defineConfig } from 'vite'
import myCustomPlugin from 'my-custom-plugin'

export default defineConfig({
  plugins: [myCustomPlugin()],
})

# Install Vue CLI globally (if not already installed)
npm install -g @vue/cli

# Create a new Vue project using Vite
vue create my-app --preset vite/vue

# Initialize a new React project using Vite
npx create-react-app my-app --template vite
cd my-app

# Start the development server
npm run dev