SoFunction
Updated on 2025-04-05

Reverse proxy in Vue

Vue reverse proxy

config file below

const ios = require('./os');

 = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://192.168.0.127:8890', // Cross-domain address        changeOrigin: true, //Whether it crosses the domain        secure: false //Whether to use https      }
    },

    host: {ip: , org: ''}, /*localhost，192.168.0.37*/
    port: 2019, // can be overwritten by , if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // /configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    useEslint: false,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    devtool: '#cheap-source-map', //‘inline-source-map'
    cacheBusting: true,
    cssSourceMap: false,
  }
}

ios file

const interfaces = require('os').networkInterfaces();
let IPAdress = '';
for(let devName in interfaces){
  let iface = interfaces[devName];
  for(let i=0;i<;i++){
    let alias = iface[i];
    if( === 'IPv4' &&  !== '127.0.0.1' && !){
      IPAdress = ;
    }
  }
}

 = { ip : IPAdress }

API Request

// Import axiosimport axios from 'axios'
('/api/v1/home/getIndexInfo').then(function(res){
          (res);
});

Vue reverse proxy related concepts and configurations

Reverse proxy usage scenarios

In the scenario where the front and back ends are separated, there is a server in the front end (providing static pages) and a server in the back end (providing interfaces)

At this time, the front-end needs to connect to the back-end interface, and cross-domain problems will occur.

In a publishing environment, if there is a cross-domain problem, use nginx

If the front and backend code is on the same server, there is no cross-domain problem.

Cross-domain solutions

  • jsonp (front-end solution)
  • CORS (backend solution): cross origin resource sharing
  • Reverse proxy (front-end solution)

What is reverse proxy

Reverse proxy hides the real server, so that the browser is still the same source

Reverse proxy principle

By forging a request, the http request is homologous, and then the same-original request is sent to the reverse proxy server, and the reverse proxy server requests the real URL, thereby bypassing the cross-domain problem caused by directly requesting the real URL.

Reverse proxy configuration

Reverse proxy for vue-cli3

Create a new file in the project root directory

Configuration code:

 = {
  lintOnSave:false,
  devServer:{
    proxy: { 
      '/api': { 
      target: 'http://localhost:80',
      changeOrigin: true, 
      pathRewrite: {
  '^/api': ""   
}，
 '/apidouban': {
      target: 'http://localhost:3001',
      changeOrigin: true, 
      pathRewrite: {
  '^/apidouban': ""
}
   }
      }
   }
}

Reverse proxy execution process:

Convert /api in axios access address to target + /api:

(eg: http:localhost:9000/api/goods Convert to http://localhost:80/api/goods)

Create a virtual server

Remove /api:

（eg：http://localhost:80/goods）

Summarize

When a page axios requests, the same address as the page url is requested. The address is spliced ​​with the API after the address. The reverse proxy server will convert the address before /api in the request address to the address in the target. In this way, the browser will consider it to be the same source when the page request occurs and will not report an error;

Sometimes a page server may request several backend servers. At this time, the reverse proxy can be set multiple times, and the name /api is also customized.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.