webpack proxy 工作原理

一、基础概念

webpack proxy，即webpack提供的代理服务。
基本行为就是接收客户端发送的请求后转发给其他服务器，并且，其目的就是为了便于开发者在开发模式下解决跨域问题（浏览器同源策略限制）。
我们想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为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: 9000,
        proxy: {
            '/api': {
                target: 'https://api.github.com'
            }
        }
        // ...
    }
}

devServer里面的proxy对象就是关于代理的配置，该对象中的每一个属性就是一个代理的规则匹配。属性的名称是需要被代理的请求路径前缀，一般为了辨别都会设置前缀为/api，值为对应的代理匹配规则，对应如下：

• target：表示代理到的目标地址
• pathRewrite：默认情况下，我们的/api也会被写入到 URL 中，如果希望删除，可以使用pathRewrite
• secure：默认情况下不接受转发到 https 的服务器上，如果希望支持，可以设置为 false.
• changeOrigin：它表示更新代理后请求的 headers 中 host 地址

  二、工作原理

  proxy工作原理实质上就是利用http-proxy-middleware这个http代理中间件，实现请求转发给其他服务器。
  举个栗子：
  在开发阶段，本地地址为http://localhost:3000，该浏览器发送一个前缀带有/api标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器。 ```javascript 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(3000);

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

三、跨域

在开发阶段，webpack-dev-server会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在localhost的一个端口上，而后端服务又运行在另外一个地址上。
所以在开发阶段，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题。
通过设置webpack proxy实现代理请求后，相当于浏览器与服务端中添加一个代理者。
当本地发送请求时，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地。

在代理服务器传递数据给本地浏览器的过程中，两者同源，并不存在跨域行为，这时候浏览器能正常接受数据。
而服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略的限制。