@nuxtjs/proxy

What is @nuxtjs/proxy?

@nuxtjs/proxy is a Nuxt.js module that allows you to easily configure proxy middleware for your Nuxt.js application. This is particularly useful for handling API requests during development, avoiding CORS issues, and routing requests to different backends.

What are @nuxtjs/proxy's main functionalities?

Basic Proxy Setup

This feature allows you to set up a basic proxy configuration. In this example, any request to `/api/` will be proxied to `http://api.example.com`, and the `/api/` prefix will be removed from the request path.

json
{
  "modules": [
    "@nuxtjs/proxy"
  ],
  "proxy": {
    "/api/": {
      "target": "http://api.example.com",
      "pathRewrite": { "^/api/": "" }
    }
  }
}

Multiple Proxies

This feature allows you to set up multiple proxy configurations. In this example, requests to `/api/` are proxied to `http://api.example.com`, and requests to `/auth/` are proxied to `http://auth.example.com`.

json
{
  "modules": [
    "@nuxtjs/proxy"
  ],
  "proxy": {
    "/api/": {
      "target": "http://api.example.com",
      "pathRewrite": { "^/api/": "" }
    },
    "/auth/": {
      "target": "http://auth.example.com",
      "pathRewrite": { "^/auth/": "" }
    }
  }
}

Custom Proxy Options

This feature allows you to customize proxy options. In this example, `changeOrigin` is set to `true` to change the origin of the host header to the target URL, and `secure` is set to `false` to allow self-signed SSL certificates.

json
{
  "modules": [
    "@nuxtjs/proxy"
  ],
  "proxy": {
    "/api/": {
      "target": "http://api.example.com",
      "pathRewrite": { "^/api/": "" },
      "changeOrigin": true,
      "secure": false
    }
  }
}

Other packages similar to @nuxtjs/proxy

http-proxy-middleware

http-proxy-middleware is a popular Node.js package for creating proxy middleware. It offers a wide range of customization options and can be used with various frameworks like Express, Koa, and more. Compared to @nuxtjs/proxy, it requires more manual setup but offers greater flexibility.

axios

axios is a promise-based HTTP client for the browser and Node.js. While it is not a proxy middleware, it can be used in conjunction with proxy settings to handle API requests. It is more focused on making HTTP requests rather than setting up proxies, but it can be configured to work with proxy servers.

node-http-proxy

node-http-proxy is a full-featured HTTP proxy for Node.js. It provides a robust set of features for creating proxy servers and routing HTTP requests. It is more low-level compared to @nuxtjs/proxy and requires more configuration, but it offers extensive customization options.

README

Proxy Module

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

📖 Release Notes

✨ Do you know that Axios Module has built in support for Proxy Module?

Features

✓ Path rewrites

✓ Host based router (useful for staging/test)

✓ Logs / Proxy Events

✓ WebSockets

✓ Auth / Cookie

✓ ...and more! (see http-proxy-middleware docs)

⚠ Does not work in generated/static mode!

Setup

• Add @nuxtjs/proxy dependency using yarn or npm to your project
• Add @nuxtjs/proxy to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
   '@nuxtjs/proxy',

   // With options
   ['@nuxtjs/proxy', { pathRewrite: { '^/api' : '/api/v1' } }],
  ]
}

• Define as many as proxy middleware you want in proxy section of nuxt.config.js (See proxy section below)

Options

• changeOrigin and ws options are enabled by default.

[optional] You can provide default options to all proxy targets by passing options to module options.

proxy

You can provide proxy config using either object or array.

Array mode

You can use magic shorthands

{
  proxy: [
    // Proxies /foo to http://example.com/foo
    'http://example.com/foo',

    // Proxies /api/books/*/**.json to http://example.com:8000
    'http://example.com:8000/api/books/*/**.json',

    // You can also pass more options
    [ 'http://example.com/foo', { ws: false } ]
  ]
}

Object mode

Keys are context

{
  proxy: {
      // Simple proxy
      '/api': 'http://example.com',

      // With options
      '/api2': { target: 'http://example.com', ws: false }
  }
}

License

MIT License

Copyright (c) Nuxt Community - Pooya Parsa [e-mail]

Changelog

1.3.1 (2018-10-30)

Bug Fixes

• add hint for "universal" mode only (#10) (c78b122)

<a name="1.3.0"></a>