{"id":41628,"date":"2025-11-26T17:49:31","date_gmt":"2025-11-26T16:49:31","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=41628"},"modified":"2025-12-12T11:33:13","modified_gmt":"2025-12-12T10:33:13","slug":"avoid-cors-requests-in-development-mode-with-vite","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/","title":{"rendered":"Avoid CORS requests in development mode with Vite"},"content":{"rendered":"\n<p>When developing a modern web application, it&#8217;s common to use a frontend (Vue, React) that communicates with a backend (Nest.js) via REST APIs. Often, the two projects live in parallel, requiring them to be run in development mode. Without specific configuration, API calls between the frontend and backend will be blocked.<\/p>\n\n\n\n<p>In my case, with a frontend in <a href=\"https:\/\/vuejs.org\/\">Vue 3<\/a> and <a href=\"https:\/\/nestjs.com\/\">NestJS<\/a> as backend, as small <a href=\"https:\/\/vite.dev\/\">Vite<\/a> configuration helps to overcome the problem in local development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-configuration-of-the-vue-3-frontend-vite\"><strong>Configuration of the Vue 3 frontend (Vite)<\/strong><\/h2>\n\n\n\n<p>Important point, the two technologies used for my project are based on Vite. As a result, by default, both projects try to use port 3000 in development mode. First, I have to change the port used by Vite in the Vue project (the frontend) to a new one (port 4200 in my case).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ vite.config.js\nexport default defineConfig({\n  \/\/ all the config...\n  server: {\n    port: 4200, \/\/ new custom port for development\n  }\n})<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-cors-request-problem\"><strong>The CORS request problem<\/strong><\/h2>\n\n\n\n<p>Now the two projects can run at the same time without port conflicts. The NestJS backend run on the default port (localhost:3000) and the Vue frontend on the newly defined one (localhost:4200), but the problem isn&#8217;t solved yet. The API calls from the frontend to the backend generate errors like this :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Access to fetch at 'http:\/\/localhost:3000\/status' from origin 'http:\/\/localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.<\/code><\/pre>\n\n\n\n<p>This error is due to security rules on the browser. Without cross-origin configuration on the server, it&#8217;s not possible to fetch url with different domain, protocol or port.<\/p>\n\n\n\n<p>One solution is to enable CORS on the backend server, but this solution requires to add some code at server side to manage a configuration that is not required in production. Indeed, it&#8217;s never a good idea to have a specific behavior only for development use cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-solution-with-vite\"><strong>Solution with Vite<\/strong><\/h2>\n\n\n\n<p>The solution is very simple with the proxy feature in the Vite development server: Vite is capable of proxifying the API and avoid CORS requests to be sent to the backend. To do that, I&#8217;ve added another piece of configuration to the frontend vite.config.js file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ vite.config.js\nexport default defineConfig({\n  \/\/ others configurations...\n  server: {\n    port: 4200, \/\/ frontend port\n    proxy: {\n      '\/api': {\n        target: 'http:\/\/localhost:3000', \/\/ NestJS backend address\n        changeOrigin: true,\n      }\n    }\n  }\n})<\/code><\/pre>\n\n\n\n<p>With this config all trafic to &#8220;http:\/\/localhost:4200\/api\/&#8230;&#8221; will be proxified to &#8220;http:\/\/localhost:3000\/api\/&#8230;&#8221;. <\/p>\n\n\n\n<p>As a result, all requests come from the same origin (localhost:4200) and no CORS errors are thrown by the browser.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When developing a modern web application, it&#8217;s common to use a frontend (Vue, React) that communicates with a backend (Nest.js) via REST APIs. Often, the two projects live in parallel, requiring them to be run in development mode. Without specific configuration, API calls between the frontend and backend will be blocked. In my case, with [&hellip;]<\/p>\n","protected":false},"author":72,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[368,3029],"tags":[3030,3753,3752,3751],"type_dbi":[],"class_list":["post-41628","post","type-post","status-publish","format-standard","hentry","category-development-performance","category-web","tag-development","tag-nestjs","tag-vite","tag-vue3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Avoid CORS requests in development mode with Vite - dbi Blog<\/title>\n<meta name=\"description\" content=\"Vue 3 - How to configure Vite development server to avoid cross-origin request in a project with REST API calls.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Avoid CORS requests in development mode with Vite\" \/>\n<meta property=\"og:description\" content=\"Vue 3 - How to configure Vite development server to avoid cross-origin request in a project with REST API calls.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-26T16:49:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-12T10:33:13+00:00\" \/>\n<meta name=\"author\" content=\"Nicolas Meunier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nicolas Meunier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\"},\"author\":{\"name\":\"Nicolas Meunier\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe\"},\"headline\":\"Avoid CORS requests in development mode with Vite\",\"datePublished\":\"2025-11-26T16:49:31+00:00\",\"dateModified\":\"2025-12-12T10:33:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\"},\"wordCount\":362,\"commentCount\":0,\"keywords\":[\"development\",\"NestJS\",\"Vite\",\"Vue3\"],\"articleSection\":[\"Development &amp; Performance\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\",\"name\":\"Avoid CORS requests in development mode with Vite - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\"},\"datePublished\":\"2025-11-26T16:49:31+00:00\",\"dateModified\":\"2025-12-12T10:33:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe\"},\"description\":\"Vue 3 - How to configure Vite development server to avoid cross-origin request in a project with REST API calls.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.dbi-services.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Avoid CORS requests in development mode with Vite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe\",\"name\":\"Nicolas Meunier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g\",\"caption\":\"Nicolas Meunier\"},\"description\":\"Nicolas Meunier has more than 20 years of experience in IT web technologies as well as in development. He is specialized in Cloud solutions such as CI\/CD. His expertise also includes Kubernetes, Docker, Jenkins-X and Azure Devops. Florence Porret (FP is IT Consultant in Cloud solutions. Prior to joining dbi services, Nicolas Meunier was developer and maintainer of a CI\/CD pipelines at CEGID in Paris. He also worked as Lead Developer at KPMG. Florence Porret (FP holds a superior technical diploma in IT development. His branch-related experience covers software and cloud platform architecture.\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/author\/nicolasmeunier\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Avoid CORS requests in development mode with Vite - dbi Blog","description":"Vue 3 - How to configure Vite development server to avoid cross-origin request in a project with REST API calls.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/","og_locale":"en_US","og_type":"article","og_title":"Avoid CORS requests in development mode with Vite","og_description":"Vue 3 - How to configure Vite development server to avoid cross-origin request in a project with REST API calls.","og_url":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/","og_site_name":"dbi Blog","article_published_time":"2025-11-26T16:49:31+00:00","article_modified_time":"2025-12-12T10:33:13+00:00","author":"Nicolas Meunier","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nicolas Meunier","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/"},"author":{"name":"Nicolas Meunier","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe"},"headline":"Avoid CORS requests in development mode with Vite","datePublished":"2025-11-26T16:49:31+00:00","dateModified":"2025-12-12T10:33:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/"},"wordCount":362,"commentCount":0,"keywords":["development","NestJS","Vite","Vue3"],"articleSection":["Development &amp; Performance","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/","url":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/","name":"Avoid CORS requests in development mode with Vite - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"datePublished":"2025-11-26T16:49:31+00:00","dateModified":"2025-12-12T10:33:13+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe"},"description":"Vue 3 - How to configure Vite development server to avoid cross-origin request in a project with REST API calls.","breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Avoid CORS requests in development mode with Vite"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe","name":"Nicolas Meunier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g","caption":"Nicolas Meunier"},"description":"Nicolas Meunier has more than 20 years of experience in IT web technologies as well as in development. He is specialized in Cloud solutions such as CI\/CD. His expertise also includes Kubernetes, Docker, Jenkins-X and Azure Devops. Florence Porret (FP is IT Consultant in Cloud solutions. Prior to joining dbi services, Nicolas Meunier was developer and maintainer of a CI\/CD pipelines at CEGID in Paris. He also worked as Lead Developer at KPMG. Florence Porret (FP holds a superior technical diploma in IT development. His branch-related experience covers software and cloud platform architecture.","url":"https:\/\/www.dbi-services.com\/blog\/author\/nicolasmeunier\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/41628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=41628"}],"version-history":[{"count":12,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/41628\/revisions"}],"predecessor-version":[{"id":41969,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/41628\/revisions\/41969"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=41628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=41628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=41628"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=41628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}