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 来解决跨域问题的完整攻略,希望对你有所帮助!
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解webpack-dev-server使用http-proxy解决跨域问题 - Python技术站