Vite dev server: support netlify dev

Is your feature request related to a problem? Please describe. netlify dev doesn’t work with vite dev server. netlify dev starts a proxy server which redirect to vite dev server. However vite dev server replies with ok. I suspect this might be due to host mismatch, since the proxy and the server and on different ports.

Describe the solution you’d like vite dev server and netlify dev should be friends.

Describe alternatives you’ve considered Checked the vite docs for a way to relax the hostname checking

Additional context Reproduction repository: https://github.com/franciscolourenco/netlify-dev-vite

[ghost]

I use them together like this:

# netlify.toml
[[redirects]]
force = true
from = '/api/*'
status = 200
to = '/.netlify/functions/:splat'

[[redirects]]
from = '/*'
status = 200
to = '/index.html'

[build]
command = 'npm run build'
environment = {NODE_VERSION = '14'}
publish = 'dist'

[dev]
autoLaunch = false

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8888/.netlify/functions',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

Then run two commands:

  "scripts": {
    "dev": "vite",
    "netlify": "netlify dev",
    "build": "vite build"
  },

[riderx]

with lastest version each time we start the server a random port is used so it’s need to add functionsPort = 8885 in netlife dev config like below:

[build.environment]
  NPM_FLAGS = "--prefix=/dev/null"
  NODE_VERSION = "14"

[build]
  publish = "dist"
  command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"

[[redirects]]
  force = true
  from = '/api/*'
  status = 200
  to = '/.netlify/functions/:splat'

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/manifest.webmanifest"
  [headers.values]
    Content-Type = "application/manifest+json"

[dev]
  autoLaunch = false
  functionsPort = 8885

and vite config :

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8885/.netlify/functions',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})