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

雨点打透心脏的1/2处 2023-07-06 06:18 1阅读 0赞

## **反向代理** ##

**一、为啥要叫反向代理**

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

**二、反向代理解决的问题**

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

三、**反向代理的原理**

通过伪造请求使得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.请求和反向代理的流程示意图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

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.  ![uploading.4e448015.gif][]正在上传…重新上传取消

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:3][http_localhost_3]000），axios.get(api/books)，就相当于 axios.get([http://localhost:3][http_localhost_3]000/books)，这样就成功的把当前服务器的“api/books”路径的请求转到别的服务器[http://localhost:3][http_localhost_3]000/books的请求。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200216190420242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[uploading.4e448015.gif]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jc2RuaW1nLmNuL3JlbGVhc2UvbXAvaW1nL3VwbG9hZGluZy40ZTQ0ODAxNS5naWY
[http_localhost_3]: http://localhost:8080