Front-end configuration reverse proxy proxyTable

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

1. Why use proxyTable

1. The browser has the same-origin policy and does not allow cross-domain access. The so-called cross-domain is (any one of the protocols, domain names, and ports is different).
2. In the usual project development environment, cross-domain problems are often encountered. For example, if you need to conduct local joint debugging with a back-end colleague, you need to use a reverse proxy to solve the cross-domain problem between the two computers.

Second, how to use proxyTable to process data functions and methods.

Let's still take vue-related projects as an example (the technology stack currently used is vue), first of all, we need to find the index.js file under the config folder in the root directory. Since we are using it in a development environment, it is natural to configure it in dev:

dev: {
    
    
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    
    
      '/': {
    
    
      	// target表示目标接口域名
        target: 'www.666.com', //举个例子具体要看后端给的
        // target: 'http://172.20.225.45:9033/api/zy/rental/house/web/',  //需要和哪个后端连接调试就在这里新增修改
        // target: 'http://192.168.209.123:9033/api/zy/rental/house/web/',
        changeOrigin: true // 是否跨域
      }
    },
    host: '0.0.0.0', // 本地访问
    // host: 'localhost',
    port: 8086,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

3. When the interface address does not have a unified project name

What if the interface returned from the background to our front end does not have a unified project name? As follows, first artificially add a custom project name in front of the interface address, and then rewrite the interface

//先人为给接口地址前面加上一个自定义的项目名
let someApi = '/api' + '/xx/xx';

dev: {
    
    
  ...
  proxyTable: {
    
    
    '/api': {
    
    
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
    
    
        '^/api': '/'   //重写接口
      }
    }
  }
  ...
}

Fourth, the principle of proxyTable

The same-origin policy is a standard that browsers need to follow, and if the server requests from the server, it does not need to follow the same-origin policy. The proxyTable of vue-cli uses http-proxy-middleware middleware, which essentially opens a server dev-server locally, and all requests are forwarded through here, that is, the sending request of the browser is forwarded by proxy Go to the proxy server, and then the proxy server sends the request to the target server to solve the cross-domain problem.


There are many scenarios where cross-domain problems are encountered, not only on the web side, but also on small programs. There are also various solutions, such as jsonp, cors, websocket, nginx reverse proxy, as well as the node middleware proxy used above. In actual project development, more agents are used to avoid the same-origin policy.