Vue devServer.proxy in vue.config.js not working

Question

I'm using the following configuration in my vue.config.js located in the root of my repository and it's not working.

  module.exports = {
    devServer: {
        proxy: "http://localhost:3030"
      }
  }

and this is how I'm trying to call it

  return await fetch("/posts", options).then((response) =>
    response.json()
  ).catch(e => console.log("Error fetching posts", e));

however when I change the calling code to the code shown below everything works

  return await fetch("http://localhost:3030/posts", options).then((response) =>
    response.json()
  ).catch(e => console.log("Error fetching posts", e));

Edit:

I should have mentioned that I'm using Vite for builds as that was causing some other problems for me with environment variables so it's possible they are causing problems with proxies too.

I looked into this more and it turns out that Vite does have proxy features and so I tried updating my code to use their proxy with still no luck.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    "/posts": "http://localhost:3030/posts"
  }
})

proxy takes an object as the argument, where the property 'key' is a path. What are you trying to achieve here? — match
– match, Commented Jun 15, 2021 at 19:08
@match I'm wanting the call to fetch("/posts", options) to resolve to http://localhost:3030/posts in dev builds — Ryan Vice
– Ryan Vice, Commented Jun 15, 2021 at 20:30

tony19 · Accepted Answer · 2021-06-16 20:57:36Z

9

vue.config.js is intended for Vue CLI scaffolded projects (and your config would've worked there), not for Vite projects. Vite's configuration is stored in vite.config.js.

Your Vite config value for server.proxy contains an unnecessary /posts suffix:

"/posts": "http://localhost:3030/posts"
                                ^^^^^^

The value should just be the base URL to which the original path is appended:

"/posts": "http://localhost:3030"

Example:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/posts': 'http://localhost:3030'
    }
  }
})

GitHub demo

edited Jun 16, 2021 at 20:57

answered Jun 15, 2021 at 22:41

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue devServer.proxy in vue.config.js not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related