This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Guille Acosta
So, Today I learned how to setup a proxy server on vite. I was tired of seeing this kind of lines over an over:
axios.get('localhost:5001/api/products/1234')
so, first approach was to create a .env.local and set there a env variable like this:
VITE_API_BASE_URL="localhost:5001"
this way my initial code would look like:
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
axios.get(`${API_BASE_URL}/api/products/1234`)
but this approach add this new line each time I need to get the API_BASE_URL.
So I decided to setup a proxy server. This is useful not only for "making URLs shorter" but for overcoming CORS issues if your api is in a host other than "localhost".
export default defineConfig({
plugins: ...,
server: {
proxy: {
'/api': {
target: 'http://localhost:5001',
changeOrigin: true,
secure: false,
}
}
}
})
Loading target from .env
let's say you would like to change that target prop based on the environment you are running the application.
You can do it by checking the command or the mode, but I recommend load the .env file and using the VITE_API_BASE_URL we already defined.
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: ...,
server: {
proxy: {
'/api': {
target: env.VITE_API_BASE_URL,
changeOrigin: true,
secure: false,
},
this way, the target will depend on the VITE_API_BASE_URL defined on the .env which should be different on production, staging or local.
Fixing "http proxy error ECONNRESET"
Even if the request are succeding (by checking the network inspector) there is an error logged by vite on the terminal.
http proxy error ECONNRESET at TLSWrap.onStreamRead
for every single request which gets proxied.
So the answer posted here does the trick.
You will need first to add https as a dev dependency by doing: npm i -D https
and then importing on the top of vite.config.js:
import http from "https";
and then adding the agent prop on the proxy key /api we just created:
server: {
proxy: {
'/api': {
target: env.VITE_API_BASE_URL,
changeOrigin: true,
secure: false,
agent: new http.Agent()
},
Hope this helps somebody to save some minutes on your next project. Happy coding!
Official docs can be found here: vite server proxy options
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Guille Acosta
Guille Acosta | Sciencx (2022-12-29T21:04:53+00:00) TIL: setting up proxy server on vite. Retrieved from https://www.scien.cx/2022/12/29/til-setting-up-proxy-server-on-vite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.