webpack in how to configure a reverse proxy, how to configure a reverse proxy, webpack reverse proxy configuration (front and rear ends of the FBI), how to use a reverse proxy to solve cross-domain problems

Reverse Proxy

 

First, why be called a reverse proxy

       Forward proxy hide the real client, the reverse proxy hide the real server.

Second, reverse proxy problem

       Reverse proxy solution is to cross-domain , in the case of former FBI back-end, front end servers, back-end server also, so when the FBI, there is cross-domain issues

Third, the reverse proxy principle

        Such as homologous http request, and then sends a request to the homologous reverse proxy server, the reverse proxy server to request a real url, thus bypassing direct request url cause real problems by forging cross-domain request.

Fourth, the reverse proxy how to use

1. cmd in the project directory
2. Installation axios and http-proxy-middleware module

            npm she axios -S

            npm i http-proxy-middleware

  3. Configure project /config/index.js in dev,

  4. Find the proxyTable dev configuration object: {}

 

    //反向代理配置
    //proxy:就是代理的意思
    //把 开头为"/api"的请求，转到 http://localhost:3000
    proxyTable: {
      '/api':{
         target:"http://localhost:3000",//这个地址就是后端提供数据的地址。
         changeOrigin:true,
         pathRewrite:{
           '^/api':''
         }
      }
    },

 

 

The reverse proxy and request a schematic flow diagram:

 

6, reverse proxy the whole process (can not read), start from the request

     1), the address bar request Address:

          http://localhost:8080/

     2), according to the configuration file (the project root directory /config/index.js/ dev) server configuration and routing to find the root component

  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

1. Uploading ... re-upload canceled

    3), the root mount component data, axios transmission request immediately, the request is "In the beginning of the path api (api / books)

  //请求的地址是 以 "/api" 开头，经过反向代理 把 /api/books 转成 http://localhost:3000/books;
        axios.get('/api/books')
        .then(res=>{
            console.log(res.data);
        });    

4）、根据配置文件（项目文件夹/config/index.js）里的proxyTable的配置（以api开头的请求都会被转到地址 http://localhost:3000），axios.get(api/books)，就相当于 axios.get(http://localhost:3000/books)，这样就成功的把当前服务器的“api/books”路径的请求转到别的服务器http://localhost:3000/books的请求。