Hi

You have merged my contribution, but you have removed its main benefit.

The need addressed is to be able to override the proxy configuration at runtime. This way it is possible to compile with default options and then run it with options adapted to the execution environment.

I understood what you tried to do by allowing the use of the "runtimeConfig" configuration in "nuxt.config.ts". So here is a new contribution that takes up what I understood from your idea and my initial need.

Now its possible to use :

NUXT_PROXY_OPTIONS=[{}, {"target": "http://proxy.target.for/second/proxy"}]
# NUXT_PROXY_OPTIONS_TARGET=http://target.for/single-proxy

I use the exact same config as in the README, and attempted to fetch the API from useAsyncData using $fetch like so:

const { data } = useAsyncData('todos', () => $fetch(`${baseUrl}/api/todos`), { transform: ({ data }) => data })

But the page is just stuck at pending. Using it with useFetch seems to be working fine, though. It's particularly weird since the Nuxt's doc mentioned that useFetch is just a wrapper around useAsyncData and $fetch.

It also seems to be working fine when $fetch is used in CSR (i.e., onMounted).

After configuring the module as follows, it didn't work

export default defineNuxtConfig({
  modules: ['nuxt-proxy'],
  // See options here https://github.com/chimurai/http-proxy-middleware#options
  proxy: {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/find/suchen/': ''
    },
    pathFilter: [
      '/find/suchen',
    ]
  },
}

There is no error log. Request is simply stuck at "pending"

I am getting Cannot start nuxt: Cannot read properties of undefined (reading 'push') error with:

nuxt 3.0.0 nuxt-proxy 0.3.4

Any ideas what is going wrong?

As titled. Is it possible to inject the target value from environment variables at runtime instead of build time?

Using this option:

  proxy: {
    options: [
      {
        target: process.env.API_HOST,
        changeOrigin: true,
        pathRewrite: {
          '^/api/': '',
        },
        pathFilter: ['/api/'],
      },
    ],
  },

It's working fine when supplying the API_HOST value in the .env and bulid it, then run it. However, removing it from .env and supplying at runtime yields in this error:

Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}

Edit: this issue especially occurs in production environment

I just recently upgraded to 0.2.1 and it appears to no longer function. I suspect a packaging issue.

When running nuxi dev I get the following error.

 ERROR  Cannot start nuxt:  Cannot find module '/Users/wobsoriano/tmp/nuxt-proxy/src/module'

It appears as though this path is referenced in the dist/module.mjs file, the content of which is.

import jiti from 'jiti';
export default jiti(null, { interopDefault: true })('/Users/wobsoriano/tmp/nuxt-proxy/src/module');

Is it possible to have multiple proxy targets using this module ?

In the nuxt 2 proxy module, the proxy option takes either an array of configs or an object. ie:

export default defineNuxtConfig({
  proxy:[
    {
      target: 'http://api1.domain.com',
      pathFilter: [
        '/api/v1/**'
      ]
    },
    {
      target: 'http://api2.domain.com',
      pathFilter: [
        '/api/v2/**'
      ]
    }
  ]
})

// nuxt.config.ts
 export default defineNuxtConfig({
  modules: ["nuxt-proxy"],
  proxy: {
    options: {
      target: "http://localhost:1337",
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        "^/api/": "/api/",
      },
      pathFilter: ["/api/"],
    },
  },
});

// xx.vue 
const { data: post, refresh } = await useAsyncData("nav", () =>
  $fetch("/api/meta")
);

http://localhost:3000/ load failed;

http://localhost:3000/api/meta is ok ;

I am using Google Cloud run when deploying my site. The plugin works 100 in development but getting the following build error.

TypeError: debug_1.Debug.extend is not a function at Object. (/usr/src/app/.output/server/node_modules/http-proxy-middleware/dist/plugins/default/debug-proxy-errors-plugin.js:5:29) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/usr/src/app/.output/server/node_modules/http-proxy-middleware/dist/plugins/default/index.js:17:14) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)

In my docker file I expose port 8080, not sure if the could be the reason? ERROR: (gcloud.run.services.update) Cloud Run error: The user-provided container failed to start and listen on the port defined provided by the PORT=8080 environment variable. Logs for this revision might contain more information.

Environment

• Operating System: Darwin
• Node Version: v16.19.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: typescript, ssr, runtimeConfig, app, css, modules, build, experimental, components, vite, intlify, vueuse, windicss, content, openidConnect
• Runtime Modules: [email protected], @intlify/[email protected], @vueuse/[email protected], @nuxt/[email protected], @pinia/[email protected], [email protected], [email protected], unplugin-icons/nuxt
• Build Modules: -

Reproduction

Build and start or preview

Error

/path/to/my/project/.output/server/node_modules/http-proxy-middleware/dist/path-rewriter.js:4
const isPlainObj = require("is-plain-obj");
                   ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/my/project/.output/server/node_modules/is-plain-obj/index.js from /path/to/my/project/.output/server/node_modules/http-proxy-middleware/dist/path-rewriter.js not supported.
Instead change the require of index.js in/path/to/my/project/.output/server/node_modules/http-proxy-middleware/dist/path-rewriter.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/path/to/my/project/.output/server/node_modules/http-proxy-middleware/dist/path-rewriter.js:4:20)
    at Object.<anonymous> (/path/to/my/project/.output/server/node_modules/http-proxy-middleware/dist/http-proxy-middleware.js:8:22)
    at Object.<anonymous> (/path/to/my/project/.output/server/node_modules/http-proxy-middleware/dist/index.js:18:33)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'
}
 ELIFECYCLE  Command failed with exit code 1.

When I try to make an "options" request, the server sends me a 204 "no content" response.

Screenshot from postman for a request to Nuxt (PORT: 3000):

Screenshot from postman for a request to Django Rest Framework (PORT: 8000):

The proxy is working for GET or POST requests.

//nuxt.config.ts
modules: [
    '@vueuse/nuxt',
    '@pinia/nuxt',
    '@nuxtjs/color-mode',
    'nuxt-proxy',
  ],

proxy: {
    options: {
      target: 'https://localhost:8100',
      changeOrigin: true,
      pathRewrite: {
        '^/api/': '/',
      },
      pathFilter: [
        '/api/',
      ],
    },
  },

//~/api/auth.ts
getInfo() {
      return useFetch('/api/auth/auth-member/info', {
        method: 'GET',
        headers: {
          Authorization: useCookie('token').value,
        },

      })
    },