webpack Proxy工作原理

webpack Proxy

webpack Proxy , 即wepack提供的代理服务，将客户端发送的请求转发给其他服务器

目的是为了解决开发模式下的跨域问题

想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server

webpack-dev-server

webpack-dev-server是webpack官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能集成在了一起。【只适用在开发阶段】

在webpack配置对象属性中通过devServer属性提供，配置如下

// ./webpack.config.js
const path = require('path')

module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080,
        proxy: {
            '/api': {
                target: 'https://api.github.com',
                pathRewrite: {// 如果接口本身没有/api需要通过pathRewrite来重写了地址,这里把/api转成‘ ’
        			"^/api": ""
      			}
            }
        }
        // ...
    }
}

devServer里面proxy则是关于代理的配置，该属性为对象的形式，对象中每一个属性即一个代理的规则匹配。

• target：代理到的目标地址
• pathRewrite：重写路径
• secure：默认情况下不接收转发到https的服务器上，如果希望支持，可设置为false
• changOrigin：默认是false：请求头中host仍然是浏览器发送过来的host；如果设置成true：发送请求头中host会设置成target·

工作原理

proxy工作原理实质上是利用http-proxy-middleware这个http代理中间件，实现请求转发给其他服务器

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(8080);

// http://localhost:8080/api/foo/bar -> http://www.example.org/api/foo/bar

跨域

在开发阶段，webpack-dev-server 会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost 的一个端口上，而后端服务又是运行在另外一个地址上；

所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题。

通过设置webpack proxy实现代理请求后，相当于浏览器与服务端添加一个代理者

当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终由代理服务器将数据响应给本地。

参考文献：
https://webpack.docschina.org/configuration/dev-server/#devserverproxy
https://mp.weixin.qq.com/s/6nQ-m9HL3-FENv6vF4dOnQ