assignment_late
Why donate
travel_explore
API Explorer
code
How to contribute
tune
Options & Helpers
style
Style & Identity
view_quilt
Layout and Grid
widgets
Vue Components
swap_calls
Vue Directives
extension
Quasar Plugins
developer_mode
Vue Composables
security
Security
build
Quasar CLI (with Vite)
Upgrade Guide
Creating a New Project
The /quasar.config File
Convert q/app-webpack Project
Browser Compatibility
TypeScript Support
Directory Structure
Commands List
CSS Preprocessors
Page Routing with VueRouter
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling import.meta.env
State Management with Pinia
Lint and Format Code
Testing & Auditing
SPA Mode
SSR Mode
PWA Mode
Developing Mobile Apps
Capacitor Mode
Cordova Mode
Electron Mode
Browser Extensions (BEX) Mode
Ajax Requests
Opening Dev Server To Public
build
Quasar CLI (with Webpack)
stars
Icon Genie CLI
healing
Quasar Utils
note_add
App Extensions
Quasar CLI with Vite - @quasar/app-vite v3
API Proxying for Dev
When integrating a project folder (created by Quasar CLI) with an existing backend, a common need is to access the backend API when using the dev server. To achieve this, we can run the dev server and the API backend side-by-side (or remotely), and let the dev server proxy all API requests to the actual backend.
This is useful if you access relative paths in your API requests. Obviously, these relative paths will probably not work while you are developing. In order to create an environment similar to the one used by your deployed website/app, you can proxy your API requests.
To configure the proxy rules, edit the /quasar.config file in devServer.proxy. Under the hood, it uses http-proxy. Full list of its options here.
/quasar.config file
devServer: {
proxy: {
// string shorthand: http://localhost:5173/foo -> http://localhost:4567/foo
'/foo': 'http://localhost:4567',
// with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
// with RegExp: http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, ''),
},
// Using the proxy instance
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy will be an instance of 'http-proxy'
},
},
// Proxying websockets or socket.io: ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
// Exercise caution using `rewriteWsOrigin` as it can leave the proxying open to CSRF attacks.
'/socket.io': {
target: 'ws://localhost:5174',
ws: true,
rewriteWsOrigin: true,
},
},
}Caught a mistake?Edit this page in browser
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu
