Hi, I'm trying to proxy some requests during development to avoid cors issues but getting this error:

Access to XMLHttpRequest at 'https://gateway.boaconsulta.com/api/v1/cep/01322-050' (redirected from 'http://localhost:3000/cep/01322-050') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My nuxt.config.js is configured as follow:

axios: {
  proxy: true
},
proxy: {
  '/cep/': { target: 'http://gateway.boaconsulta.com/api/v1/' }
},

I'm calling the service this way on the client side:

async resolveCep () {
  await this.$axios.get(`/cep/${this.data.zip}`)
}

I see on Chrome devtools the origin header to the target url is still http://localhost:3000, but the changeOrigin option isn't about rewrite the origin header to the target url?

What I'm doing wrong?

Appreciate any help.

What problem does this feature solve?

Run CircleCI on PRs, and commits

Hello 👋

I have a simple stupid question, I'm trying to lazy-load a RSS feed in a Nuxt.js app ( when intersecting an observer ).

The RSS is not hosted on a domain i own, and as it was kind of expected i hit the CORS wall.

I would like to know if nuxt-community / proxy-module can help me proxy the query to my Nuxt server instead ?
( but still trigger from the client, not at server render time )

+-------------+ +----> +------------+
| NUXT SERVER |        |  RSS FEED  |
+-------------+ <----+ +------------+

     +   ^
     |   |
     v   +

+-------------+
| NUXT CLIENT |
+-------------+

I read some people use express alongside Nuxt for this sort of things ?

Thanks ! Good day ! ✨🏔

Is there any way to set cache on the proxy?
I'd appreciate if you could advise. Thanks :)

I have the following settings in nuxt.config.ts.

  axios: {
    proxy: true
  },

  proxy: {
    '/api/': {
      target: 'https://hoge.co.jp/v1/',
      changeOrigin: true
    },
  }

Call the API in the following way.

await axios.get(
'/api/xxx
)

With such a configuration, I did yarn dev and it works fine on localhost.

However, when I deploy the yarn generate on AWS, it does not work properly.

Also, it doesn't work properly on local PC with yarn generate + yarn start.

Is there a problem with the configuration?

#72 (comment)

Fresh reload of the page runs asyncData request and shows graphql response, navigating via nuxt-link hits the proxy and returns a 401 unauthorized. Inspecting the request shows Authoriziation: Bearer undefined. Did I misconfigure anything? Not sure where to look in the docs...

 http: {
    proxy: true,
  },
  proxy: {
    '/graphql': {
      target: 'https://url.com',
      pathRewrite: { '^/graphql': '/graphql' }
    },
  },

Version

2.0.1

Reproduction link

https://github.com/Teopolina

Steps to reproduce

run npm i @nuxtjs/proxy

What is expected ?

Package should be installed successfully and saved in dependencies

What is actually happening?

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@nuxt%2fproxy - Not found
npm ERR! 404
npm ERR! 404 '@nuxt/proxy@latest' is not in the npm registry.

I noticed, that the proxy is not working if the path is existing in the Nuxt project. During development it would be nice to have an option to overwrite this and proxy all configured requests.
For example: I have some python scripts in the static folder that will be executed over CGI. The dev server just returns the content of the scripts. To prevent this I want to provide the CGI scripts by a different server and proxy the requests during development. In production the nuxt app and the CGI scripts will be provided by the same server. The only workaround I found to make this work is to temporarily rename the files in my static folder during development.
It would be nice to have a "force" option to use the proxy even if the path exists.

Hi,

The socket file is present and working perfectly if I test it with curl.
However, the following config is not working:

{
  '/api': {
    changeOrigin: false,
    target: {
      socketPath: '/app/socket/backend.sock'
    },
    pathRewrite: {
      '^/api/api/': '/api/'
    }
  }
}

with the following error:

 ERROR  [Axios] Response error: connect ECONNREFUSED 127.0.0.1:3000               06:03:42

  at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)

The request that is generated when attempting to proxy to an external API redirects to localhost.

Reproduce with the following:

nuxt.config:

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: {
      '/geo': {target: 'http://freegeoip.net/json', pathRewrite: {'^/geo': ''}}
    }
  }

component.vue:

export default {
  async created () {
    const location = await this.$axios.$get('/geo')
    console.log(location)
  }
}

Throws a 404 with the following request headers in the call:

Request URL: http://localhost:3000/json/
Request Method: GET
Status Code: 404 Not Found

Similar to #30 I'm trying to put a dynamic header in proxy requests. At the moment I have a piece of middleware that requests data via an API and puts it in the store.

I thought there would be a template for creating this issue, but didn't immediately see one. Will happily edit request/question if needed.

Many thanks in advance

logLevel options doesn't seem to affect. how can i log proxy?

Does @nuxtjs/proxy work with static websites generated via nuxt generate?

Access address http://127.0.0.1:3000 have some problems

proxy: {
    "/api": {
      target: "http://127.0.0.1:8080",
      pathRewrite: {
        "^/api": "/"
      }
    }
  }

this.$axios.$post("/api", {
      firstName: "Fred",
      lastName: "Flintstone"
    });

But address http://localhost:3000 have no problems

What problem does this feature solve?

Runtime variables are now supported by Nuxt. Thus, the proxy-module needs to be updated to support it for its "target" value.

This module seems to be incompatible with static and SPA modes (because only server calls are rewritten). I would like to get a confirmation for this statement, then we could do something like:

1. Add disclaimer in README.md and during nuxt generate
2. Add disclaimer in modules that use this module (like axios module?)
3. Consider a way for this plugin to work for other modes (rewriting URL's during generating?)

I run into this problem.

When I have proxy set like this:

  proxy: {
    '/api/':{ target: process.env.API_URL, pathRewrite: {'^/api/': ''}, logLevel: 'debug' }
  },
  axios: {
    proxy: true
  },

when I send post to url is processed by backed just fine
this.$axios.$post('/api/non-existing-url') -> 404

But when i set payload like this:

      this.$axios.$post('/jh-api/non-existing-url', {
        form': {}
      })
->
Request failed with status code 504
✖ error nuxt › proxy › [HPM] Error occurred while trying to proxy request non-existing-url from localhost:3000 to http://127.0.0.1:8082 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

proxy-module: 1.3.1
nuxtjs/axios: 5.3.4
nuxt: 2.2.0

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@babel/preset-typescript, http-proxy-middleware, nuxt)
• chore(deps): update actions/cache action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update codecov/codecov-action action to v4
• chore(deps): update dependency http-proxy-middleware to v3
• chore(deps): update devdependency nuxt to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

[HPM] Error occurred while trying to proxy request /api/ntp from localhost:3000 to http://localhost:8000 (HPE_INVALID_CONSTANT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

This is while trying to just access a page which returns an unix timestamp.
Weird thing is it is like a switch.
It works then after a refresh it won't work, then refresh again, it won't work again, refresh again then it work, refresh again then it don't work again.

I mean it is really consistent, every other request throws an error
this is my laravel route

Route::get('ntp', function () { echo (string) round($_SERVER['REQUEST_TIME_FLOAT'] * 1000); });

If i visit it directly using localhost:8000 then there are no problems

I'm using proxy-module. When project mode PRODUCTION. I see error log.
ERROR [HPM] Error occurred while trying to proxy request [path url domain api project] from [my domain] to https://domain/Api (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
How to fixed it?

Hi i would like to use a store value with onProxyReq.
But it seems that nuxt context or store is unavailable in proxy. Any ideas how to do it ?
I've tried req.body but it's undefined.
proxy: {
'/graphql': {
target: 'https://beautifulapigraph.com',
onProxyReq: function (proxyReq, req, res, options) {
proxyReq.setHeader('X-VAL', storeBasedValue)
}
}
},

I'm using Laravel Lumen for the backend, which is on a different domain, so I have to use a proxy to be able to share the cross-origin resource.

Everything works fine on the client-side, but when enabling universal mode and trying to get a prerendered site with the first request products are not rendered because Axios request fails with status code 404.

After enabling Axios debugging I have noticed that 'api' string is still in the requested URL, but it shouldn't be, because of the pathRewrite rule:

    proxy: {
        '/api': {
            target: process.env.API_URL,
            pathRewrite: {
                '^/api': '/'
            },
            changeOrigin: true
        }
    }

When modifying code like this (removed 'api' in the request path and making fetch async), Axios request works, but then of course doesn't on the client.

What can I do to make the request work on the client and server side?

Nuxt.js v2.12.1

I have nuxt frontend and api backend on 1337 port.

I'm trying to proxy http://*nuxtapp*/api/* requests to http://localhost:1337/
Example http://*nuxtapp*/api/products to http://localhost:1337/products

When I'm using API_URL env var, as was mentioned here or here (as 'already practiced solution') then my requests are proxies to http://localhost:1337/api/products instead http://localhost:1337/products

But if I change var name to something another, like API_TARGET then it works as expected.

nuxt.config.js:

axios: {
  proxy: true,
},

proxy: {
  '/api/': {
    target: process.env.API_URL || 'http://localhost:1337',
    pathRewrite: { '^/api/': '' },
    changeOrigin: true,
  },
},

I already looked around this problem:

• when I set config.axios.baseUrl then config.proxy stop working at all.
• from axios official docs: Environment variable API_URL can be used to override baseURL
• from axios official docs: WARNING: baseURL and proxy cannot be used at the same time

Okay, if I understand, using baseURL or API_URL totally disabling proxy feature (or, pathRewrite feature, like in this case) and I have to use any another env var. But why it works in mentioned cases (links on top of this letter)? Or, what I exactly need to do in this case?

What problem does this feature solve?

The following example is in the README for http-proxy-middleware, but AFAICT, cannot be implemented in proxy-module:

var filter = function(pathname, req) {
  return pathname.match('^/api') && req.method === 'GET';
};

var apiProxy = proxy(filter, { target: 'http://www.example.org' });

I would like the ability to use context matching functions.

What does the proposed changes look like?

On a user level it might look like:

  proxy: {
    [(pathname, req) => pathname.match('^/api') && req.method === 'GET']: { target: 'http://www.example.org' }
  },

I am using NuxtJs, and need to consume Json data from two diferent Api´s.

The first Api is working, and the second Api is not working.

I follow the instructions from this link :

At nuxtjs.config i have these lines below and both url´s are retrieving data as expected:

proxy: {
    '/api': {
      target: 'http://localhost/api/stores',
      pathRewrite: {
        '^/api' : '/'
        }
      },
      '/apiCategories': {
        target: 'http://localhost/api/get_categories',
        pathRewrite: {
          '^/apiCategories' : '/apiCategories'
          }
        }
  }

At pages/index.vue at the created hook i set :

 created() {    
        Axios.get('/api')
          .then(response => {
            this.stores = response.data
          })
          .catch(error => {
            console.log('There was an error:', error.response)
          }),

          Axios.get('/apiCategories')
          .then(response => {
            this.options = response.data,
          })
          .catch(error => {
            console.log(' There was an error at apiCategories: ', error.response) 
          })
    },

The /api is working right, while the /apicategories gives me the error message :

commons.app.js:199 GET http://localhost:3000/apiCategories 404 (Not Found)

Runnnig the url http://localhost:3000/apiCategories at the browser gives me the expected Json data.

Wich is the right way to consume from two diferent Api´s using NuxtJs or proxy module ?

What problem does this feature solve?

Currently published proxy module relies on [email protected], which uses some outdated dependencies. In repository package.json already uses ^0.20.0, but after I removed @nuxtjs/axios and installed it back, I still got [email protected].

Hello,

After installing que configuring @nuxtjs/proxy as is shown in https://nuxtjs.org/faq/http-proxy/, I'm getting this warn on server side console when I refresh the page:

Error in created hook (Promise/async): "Error: connect ECONNREFUSED 127.0.0.1:80

I'm using axios.

Any advise? Something I could look up?

Best regards

Hi,

I have 2 api, from which I need to get data. Both of them are using Bearer authentication token - but this token is different for each api. How can I set token to the axios, if I am using proxy to switch baseURL, but the token is set on the axios instance?

Hello everyone,

I have a problem when I set up the proxy.

// Axios
axios: {
  proxy: true,
},

// Proxy
proxy: {
  '/api': {
    target: process.env.NUXT_ENV_BACKEND_API,
    pathRewrite: { '^/api': '/' },
    changeOrigin: false,
  },
},

The names of the Headers (Authorization, Host, etc...) are minuscule and causes errors on the back side which does not find the Headers it expects.

I may be doing a bad manipulation, but I'm lost.

From (expected result):

After (with axios proxy true):

I need HTTP/2 server support

Version

1.3.3

Reproduction link

https://github.com/MikeKonan/nuxt_proxy_sse_bug

Steps to reproduce

1. Start express server - "node ./server/index.js"
2. Start web app - "npm run dev" or "npm run build && npm run start"

What is expected ?

events are being shown in chrome debugger

What is actually happening?

events are NOT being shown in chrome debugger

Additional comments?

It's working as expected in develop mode - HTTP request reaches 200 and events are being shown in chrome debugger. But not working on a production mode when HTTP request succeeds with 200 but no events are being shown.

Normal Request Header

Request URL: http://localhost:6088/
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:6088
Referrer Policy: no-referrer-when-downgrade

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,zh-HK;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Cookie: Authorization=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI5YjBlNWUzZi0zMGU3LTRlOTItODhlMS1iMmJiNzJjYjk1YmMiLCJleHBpcmVkIjoxNTI4NDQxMjQ0LCJpYXQiOjE1MjgzNTQ4NDR9.cq8bNEdeo6rX4Ao56nKjpOZeDXlI9FZk5u7U_yxpvgg
DNT: 1
Host: localhost:6088
Pragma: no-cache
Referer: http://localhost:6088/repo/create
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Proxy Request Header

Request URL: http://localhost:6088/api/graphql
Request Method: POST
Status Code: 200 OK
Remote Address: 127.0.0.1:6088
Referrer Policy: no-referrer-when-downgrade

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,zh-HK;q=0.7
Connection: keep-alive
Content-Length: 300
Content-Type: application/json;charset=UTF-8
Cookie: Authorization=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiIwYzkwMDAwYy05ZDIxLTRjNTctYTE4ZS1hMzAyYTAwZDg1ZmQiLCJleHBpcmVkIjoxNTI4MzU3MTE2LCJpYXQiOjE1MjgyNzA3MTZ9.MdPAlJVBlJR8faDw_VxVcE6zVLjIVH-YC6vSisnzBe0; Authorization=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI5YjBlNWUzZi0zMGU3LTRlOTItODhlMS1iMmJiNzJjYjk1YmMiLCJleHBpcmVkIjoxNTI4NDQxMjQ0LCJpYXQiOjE1MjgzNTQ4NDR9.cq8bNEdeo6rX4Ao56nKjpOZeDXlI9FZk5u7U_yxpvgg
DNT: 1
Host: localhost:6088
Origin: http://localhost:6088
Referer: http://localhost:6088/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Look at the cookie Authorization=xxx

The normal request only sent once. the proxy send 2 same Authorization key.

and I even don't know how it comes.

It seen only occurs in chrome@66, work in firefox and safari

All request without query string (post, get, web sockets) proxied normally
But every request with ?any_arg get 404 from nuxt

I tested raw express with http-proxy-middleware, it's work correct
app.use(proxy.createProxyMiddleware("/api/**", { target: "http://localhost:8888/zzzzz" }))

nuxt.config.js

proxy: {
  '/api: { // i tried '/api/**'
    changeOrigin: false,
    target: {socketPath},
  },
},

Upd

All requests with queries have url='/' in serverMiddlware
E. g.: /api/test => /api/test, /api/test?test=1 => /?test=1
I don't know when proxy intercepts requests, maybe problem not in proxy module, but it's look strange for me

Would it be possible to use a kind of parameter, environment variable in case of different proxy locations depending on run dev

'/json': 'http://localhost:5000/'

or run beta?

'/json': 'http://beta.application.com/'

I am fetching an API from a Nuxt.js app using fetch() instead of Axios. The API server returns a Access-Control-Allow-Origin * header, allowing anyone to access that resource. When I refresh the page it works as expected but when I browse the app and click a route, the new fetch is blocked by CORS.

I also tried Nuxt.js proxy but it doesn't work either:

Nuxt.js config file:

  proxy: {
    '/api': {
      target: 'https://www.example.com',
      pathRewrite: {
        '^/api': '/'
      },
      changeOrigin: true
    }
  }

My component:

  let headers = new Headers()
  headers.set('Authorization', `Bearer ${process.env.apiToken}`)
  let data = await fetch('/api/product-brand' + id, {
    method: 'GET',
    mode: 'cors',
    headers
  }

I'm completely at a loss, so hopefully you all can help. My org is switching from Google Analytics to Plausible. I don't know all the details, but Plausible ostensibly involves no user tracking (beyond just seeing that a webpage was visited). Regardless, most of the ad blockers still block the script they ask you to include. To counteract this, they include some suggestions for proxying to their script file. Something extremely basic, like this:

https://<yourdomain.com>/js/script.js -> https://plausible.io/js/plausible.js
https://<yourdomain.com>/api/event    -> https://plausible.io/api/event

For the life of me, I can't get this module to do something this simple. I have to assume it's my own lack of understanding. Here are the relevant parts of my nuxt.config.js:

head: {
  script: [
      {
        defer: true,
        "data-domain": "mydomain.com",
        src: process.env.BASE + "js/pls-script.js",
      },
    ],
},
proxy: {
  "/js/pls-script.js": {
      target: "https://plausible.io/js/plausible.js",
    },
}

The script portion is a Nuxt-formatted version of their script to include, which would normally look like:

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/plausible.js"></script>

I just keep getting 404s from the proxied link. Any ideas or tips for debugging with this module are also welcome.

When I configure the proxy to exceed 10, node will throw an error. Like this:

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 upgrade listeners added. Use emitter.setMaxListeners() to increase limit

This will make my memory leak

I am creating a new custom e-commerce application. Currently my product catlog url :
https://example.com/cat-title/cat-id

How can I rewrite to the following?
https://example.com/cat-title/

What problem does this feature solve?

One of my modules provides a default configuration for the Proxy module if there is no configuration set in the nuxt.config.js file. But this results in a warning:

WARN: No proxy defined on top level.

The module works correctly, accepting the configuration from my module, so the warning, while accurate, is not actually relevant.

What does the proposed changes look like?

Unsure, possibly check configuration at a later stage, or provide a method for a module to suppress the warning?

Hi,

I am working on a new deployment structure using docker. The problem I am having now is that the target option has to be passed on build and not on runtime.

Nuxt now has the publicRuntimeConfig and privateRuntimeConfig but I have not found a way to use these in the nuxt.config.js. Is there a way to do this? Another option maybe to make target a function which in which the ctx gets passed. But of course this functionality is from http-proxy-middleware and is not functionality (I think) this library can change.

I am also going to create a ticket at the nuxt repo but I was wondering if there is a solution for this?

I also opened a ticket at Nuxt: #8635

How can I use the onProxyReq or what is the best way to alter the header based on a value on the appobject?

Hello, I have a question here.

When I have proxy enabled I want to proxy full urls, but it doesn't work.

proxy: {
  'https://api.example.io': 'https://api.example.io'
}

What i'm trying to archive is that all request to api.example.io goes thru proxy.

Thank you

The first visit page will be successful, but this bug will occur when refreshing the page.
If the proxy's page size is too large, it will out of memory.

code:

// vue code
<iframe frameborder="0" width="100%" height="100%"
   src="/test/page"
   id="aFrame"></iframe>

// nuxt.config.js code
proxy: [
  ['/test/page', { target: 'http://github.com/nuxt-community/proxy-module', },],
  ],

err:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

What problem does this feature solve?

Proxy module is configured in buildtime, so you can not use env variables expecting to change on runtime.

What does the proposed changes look like?

Nuxt has runtime config support since v2.13:
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config

Axios module already use runtime config:
https://github.com/nuxt-community/axios-module/blob/master/lib/module.js#L14

I suggest to do it the way axios module do it to allow proxy module works with runtime config.

I want to exclude a url in the proxy.

There is such a writing in chimurai/http-proxy-middleware.

proxy(['/api/**', '!**/bad.json'], {...}) exclusion

How to write in proxy-module？

Thinks!

What problem does this feature solve?

I have an app with a single dynamic route at "/". To solve CORS problems in development, I decided to try the proxy module. However, it doesn't work as the request to proxy is intercepted by the dynamic route, leading nuxt to hang and crash.

What does the proposed changes look like?

I would think it would be ok to let '/api' supersede nuxt routes when proxy module is used. If for some reason this isn't acceptable, an option for this would be useful.

What problem does this feature solve?

Currently the proxy module can't make use of a company proxy server, resulting in timeout with external identity provider(e.g. keycloak), which is being proxied through /auth. Although the docker container is configured properly for using the company proxy, nuxt.js and especially the nuxt proxy module don't utilize these settings.

What does the proposed changes look like?

Add a boolean flag as well as configuration option for nuxt.config to utilize the company proxy server, e.g.:

proxy: {
    '/auth': {
      target:
        (process.env.KEYCLOAK_SCHEME || 'http') +
        '://' +
        (process.env.KEYCLOAK_HOST || 'localhost') +
        ':' +
        (process.env.KEYCLOAK_PORT || '8080'),
      useCompanyProxy: true,
      companyProxy: process.env.COMPANY_HTTP_PROXY // example: http://companyproxy:8888
    },
...