webpack里如何配置反向代理，怎样配置反向代理，webpack配置反向代理(前后端联调)，如何用反向代理解决跨域问题

反向代理

一、为啥要叫反向代理

       正向代理隐藏真实客户端，反向代理隐藏真实服务端。

二、反向代理解决的问题

       反向代理解决的就是跨域，在前后端联调的情况下，前端有服务器，后端也有服务器，那么联调时，就存在跨域问题

三、反向代理的原理

        通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。

四、反向代理如何使用

1. 在项目目录下cmd
2. 安装axios与http-proxy-middleware模块

            npm i axios -S

            npm i http-proxy-middleware

  3.在项目/config/index.js中的dev中配置

  4.在dev配置对象中找到proxyTable:{ }

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

 

 

5.请求和反向代理的流程示意图：

6、反向代理全流程（可以不用阅读），从请求开始

     1)、地址栏请求地址：

          http://localhost:8080/

     2）、根据配置文件（项目根目录/config/index.js/的dev）对服务器的配置和路由找根组件

  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. 正在上传…重新上传取消

    3）、根组件数据挂载后，立即发送axios请求，请求的是 “以 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的请求。