More Premium Hugo Themes Premium Nuxt Themes

Proxy Module

The one-liner node.js http-proxy middleware solution for Nuxt 2 using http-proxy-middleware

Proxy Module

The one-liner node.js http-proxy middleware solution for Nuxt 2 using http-proxy-middleware

Author Avatar Theme by nuxt-community
Github Stars Github Stars: 412
Last Commit Last Commit: Sep 17, 2023 -
First Commit Created: Dec 18, 2023 -
Proxy Module screenshot

Overview

The @nuxtjs/proxy is a npm package that provides proxy support for Nuxt 2 server. It allows users to configure proxies in their Nuxt applications and provides features such as path rewrites, host-based routing, proxy event logging, WebSockets support, and cookie authentication.

Features

  • Path rewrites: Allows users to rewrite paths in the proxy configuration.
  • Host-based router: Useful for staging and testing purposes, allows users to route requests based on the host.
  • Logs / Proxy Events: Logs and provides events related to proxy requests.
  • WebSockets: Proxy supports WebSockets, allowing users to proxy WebSocket connections.
  • Auth / Cookie: Supports authentication and cookie handling for proxy requests.
  • … (additional features mentioned in the documentation)

Installation

To install the @nuxtjs/proxy package, follow these steps:

  1. Add the @nuxtjs/proxy dependency to your project using the package manager (e.g., npm or yarn).
  2. Add “@nuxtjs/proxy” to the modules section of the nuxt.config.js file.
  3. Define your desired proxy middleware in the proxy section of the nuxt.config.js file.

Here is an example of how to configure the proxy using an array configuration:

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/proxy',
  ],
  proxy: [
    'http://example.com/api',
    {
      context: '/foo',
      target: 'http://example.net',
      pathRewrite: { '^/foo': '' }
    }
  ],
}

Alternatively, you can use an object configuration by providing proxy configuration options:

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/proxy',
  ],
  proxy: {
    '/api/': { target: 'http://example.net', pathRewrite: { '^/api/': '' } },
    '/foo/': { target: 'http://example.org', pathRewrite: { '^/foo/': '' } }
  },
}

You can also provide default options to all proxy targets by passing options to the module options in the nuxt.config.js file.

Summary

The @nuxtjs/proxy package is a useful tool for configuring proxies in Nuxt applications. It provides various features such as path rewrites, host-based routing, WebSocket support, and authentication handling for proxy requests. By following the installation guide, users can easily set up and configure proxies in their Nuxt projects.