[](https://www.npmjs.com/package/unplugin-https-reverse-proxy) [](https://deepwiki.com/zcf0508/unplugin-https-rever
npm install unplugin-https-reverse-proxy
A plugin for https reverse proxy, support vite、webpack and rspack.
Support set caddy file path by environment variable UHRP_CADDY_PATH, default is system cache folder.
``env`
#.env.local
UHRP_CADDY_PATH=~/tmp/.uhrp
`bash`
npm i unplugin-https-reverse-proxy --save-dev
`ts`
interface Options {
/* default: true /
enable?: boolean
/* target hostname /
target: string
/* default: false /
showCaddyLog?: boolean
/* default: false /
https?: boolean
}
Vite
`ts
// vite.config.ts
import HttpsReverseProxy from 'unplugin-https-reverse-proxy/vite'
export default defineConfig({
plugins: [
HttpsReverseProxy({ / options / }),
],
})
`
Example: playground/
Webpack 5
`js
// webpack.config.js
/* @type {Parameters
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
}
module.exports = {
/ ... /
devServer: {
client: {
// ↓ for HMR
webSocketURL: {
...(reverseProxyOptions.enable
? {
hostname: reverseProxyOptions.target,
}
: {}),
...(reverseProxyOptions.enable && reverseProxyOptions.https
? {
protocol: 'wss',
port: 443,
}
: {})
}
},
setupExitSignals: true,
allowedHosts: 'all',
},
plugins: [
require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions)
]
}
`
Webpack 4
`js
// webpack.config.js
/* @type {Parameters
const reverseProxyOptions = {
enable: false,
target: 'xxx',
// https: false, // not support yet
}
module.exports = {
/ ... /
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
},
plugins: [
require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions)
]
}
`
Rspack
`js
// rspack.config.js
/* @type {Parameters
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
}
module.exports = {
/ ... /
devServer: {
client: {
// ↓ for HMR
webSocketURL: {
...(reverseProxyOptions.enable
? {
hostname: reverseProxyOptions.target,
}
: {}),
...(reverseProxyOptions.enable && reverseProxyOptions.https
? {
protocol: 'wss',
port: 443,
}
: {})
}
},
},
plugins: [
require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)
]
}
`
Rsbuild
`js
// rsbuild.config.js
/* @type {Parameters
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
healthCheck: true,
}
module.exports = {
/ ... /
dev: {
client: {
// ↓ for HMR
...(reverseProxyOptions.enable
? {
host: reverseProxyOptions.target,
}
: {}),
...(reverseProxyOptions.enable && reverseProxyOptions.https
? {
protocol: 'wss',
port: '443',
}
: {})
},
},
tools: {
rspack: {
plugins: [
require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)
]
},
},
}
`
Nuxt
`js`
// nuxt.config.js
export default defineNuxtConfig({
modules: [
['unplugin-https-reverse-proxy/nuxt', {
/ options /
healthCheck: false, // important for nuxt
}],
],
})
!important: You need to update the nuxt dev script by adding --fork=false to enable host restoration.
`json
// package.json
{
"scripts": {
"dev": "nuxt dev --fork=false"
}
}
`
Vue CLI 5
`js
// vue.config.js
/* @type {Parameters
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
}
module.exports = {
devServer: {
client: {
// ↓ for HMR
webSocketURL: {
...(reverseProxyOptions.enable
? {
hostname: reverseProxyOptions.target,
}
: {}),
...(reverseProxyOptions.enable && reverseProxyOptions.https
? {
protocol: 'wss',
port: 443,
}
: {})
}
},
setupExitSignals: true,
allowedHosts: 'all',
},
configureWebpack: {
plugins: [
require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions),
],
},
}
`
Vue CLI 4
`js
// vue.config.js
/* @type {Parameters
const reverseProxyOptions = {
enable: false,
target: 'xxx',
// https: false, // not support yet
}
module.exports = {
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
},
configureWebpack: {
plugins: [
require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions),
],
},
}
`
executable file after you updated to ^2.0.0.
The default path is $TMPDIR/caddy, and if you set UHRP_CADDY_PATH, it will be in the path you set.Please check caddy path.
Usage
`bash
macOS
sudo -E npm run dev # your dev script
^
-E is importantwindows
use powershell as administrator
npm run dev # your dev script
``If your broswer shows a not trusted certificate warning, please check the keychain.
More info, you can check caddy about CA Root.