详解webpack-dev-server使用http-proxy解决跨域问题

Webpack-dev-server 是 webpack 中提供的一个开发服务器，使我们可以在开发环境中快速开发，通过 webpack-dev-server 实现的 HMR（hot module replacement）功能，可以很方便的在不刷新浏览器页面的情况下实现模块热替换，极大地提升了开发效率。

Webpack-dev-server 是 webpack 中提供的一个开发服务器，使我们可以在开发环境中快速开发，通过 webpack-dev-server 实现的 HMR（hot module replacement）功能，可以很方便的在不刷新浏览器页面的情况下实现模块热替换，极大地提升了开发效率。

在开发过程中，我们经常需要和服务器端进行 API 接口的交互，但是由于浏览器的同源策略限制，不同域的页面之间不能直接访问对方的数据，会导致跨域访问的问题，为了解决这个问题，webpack-dev-server 提供了 http-proxy 中间件，可以帮我们实现跨域访问。

以下是详解 webpack-dev-server 使用 http-proxy 解决跨域问题的完整攻略：

步骤一：安装http-proxy-middleware

在 webpack-dev-server 中集成http-proxy-middleware，首先需要安装http-proxy-middleware依赖：

npm install http-proxy-middleware --save-dev

步骤二：配置webpack-dev-server

在 webpack.config.js 配置文件中添加devServer选项：

 devServer: {
    contentBase: './dist',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock' 
        }
      }
    }
 }

• contentBase：设置静态资源文件所在目录
• port：设置开发服务器端口号
• proxy：配置跨域代理

代理配置项：

• /api：要代理的url前缀，例如：/api/getData
• target：代理目标地址，例如：http://localhost:3000/getData
• changeOrigin：设置为true时，本地会虚拟一个服务器接收你的请求并代替你发送请求。因为设置了代理转发到index.js上，所以需要设置为true，否则接口访问不到
• pathRewrite：路径重写，把/api替换为空，比如接口跨域地址是http://xxxx.com/api/test，我们只需要将/api去掉，那么请求地址变成了http://xxxx.com/test，pathRewrite就是用来做这个事情的。

步骤三：启动 webpack-dev-server

在命令行中运行以下命令，启动webpack-dev-server：

webpack-dev-server --open

示例一：指定代理路径的情况

以create-react-app脚手架工具为例，假设我们在开发过程中需要访问/api/getData接口，但是该接口是在另外一台服务器上，我们可以通过如下配置来解决跨域问题：

 devServer: {
    contentBase: './dist',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
 }

这里代理的路径是/api，target是我们要代理到的服务器地址，这是指定代理路径的情况。

示例二：通配符代理的情况

在实际开发中，我们可能需要很多请求代理到同一个后端服务上，这时候我们可以使用通配符代理来实现。假设我们有以下两个后端服务地址：

• http://localhost:8080/service1
• http://localhost:8080/service2

我们可以使用通配符代理来代理这两个地址：

 devServer: {
    contentBase: './dist',
    port: 3000,
    proxy: {
      '/service*': {
        target: 'http://localhost:8080',
        pathRewrite: (path, req) => ({
          '/service1': '/mock1',
          '/service2': '/mock2'
        }[path.replace(/^\/service/, '')])
      }
    }
 }

这里通配符代理的路径是/service*，代理目标地址是http://localhost:8080。使用pathRewrite配置选项，将匹配到的路径根据自己的需求重写成另一个路径，这是通配符代理的情况。

这就是使用 webpack-dev-server 和 http-proxy-middleware 来解决跨域问题的完整攻略，希望对你有所帮助！