How to set proxy for different API server using Nuxt?

In Nuxt.js, to address cross-origin request issues or to route API requests to different servers, we can utilize the built-in proxy module or configure custom proxy rules. This is achieved by setting up the proxy property in the nuxt.config.js file. Here are the steps to implement this:

Installing Dependencies

First, ensure the @nuxtjs/proxy module is installed. If not, install it using:

sh
npm install @nuxtjs/proxy --save

Or with yarn:

sh
yarn add @nuxtjs/proxy

Configuring nuxt.config.js

Then, in your nuxt.config.js file, add @nuxtjs/proxy to the modules section and configure the proxy property. For example:

javascript
export default {
  // Other configurations...

  modules: [
    // Other modules
    '@nuxtjs/proxy',
  ],

  proxy: {
    '/api/': { target: 'http://api.server1.com', pathRewrite: {'^/api/': ''}, changeOrigin: true },
    '/api2/': { target: 'http://api.server2.com', pathRewrite: {'^/api2/': ''}, changeOrigin: true }
  },

  // Other configurations...
}

In this example:

• Requests targeting the /api/ path are forwarded through the proxy to http://api.server1.com. The pathRewrite property ensures the /api/ segment is removed from the request path during forwarding.
• Requests for the /api2/ path are forwarded to http://api.server2.com, with pathRewrite similarly removing the /api2/ segment.

Setting changeOrigin to true instructs the proxy to modify the host header in request headers to reflect the target server's hostname, which is commonly required for backend APIs that enforce hostname checks.

By doing this, you can define multiple proxy rules based on different paths to forward requests to distinct API servers.

Using Proxies in Development

During local development, you can directly make requests to /api/ or /api2/ paths via the Nuxt.js service. These requests are automatically forwarded to the respective target servers without cross-origin concerns.

Production Environment

When deploying to production, ensure the relevant proxy services are correctly configured so the proxy rules remain effective.

Example:

Suppose your Nuxt.js application fetches data from different sources, such as:

• User data from http://user.api.server/
• Product data from http://product.api.server/

Your nuxt.config.js proxy configuration might look like this:

javascript
export default {
  // Other configurations...

  modules: [
    // Other modules
    '@nuxtjs/proxy',
  ],

  proxy: {
    '/users/': { target: 'http://user.api.server', pathRewrite: {'^/users/': ''}, changeOrigin: true },
    '/products/': { target: 'http://product.api.server', pathRewrite: {'^/products/': ''}, changeOrigin: true }
  },

  // Other configurations...
}

After this setup, requests to /users/ in your Nuxt.js application are proxied to the user API server, and requests to /products/ are proxied to the product API server.