webpack高级概念,使用 WebpackDevServer 实现请求转发一 (系列十四)
当我们工作本地开发某一个需求的时候,需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上,就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求,并将其转发到我们想要转发的接口上呢?只有开发环境需要代理,
这个时候就需要用到 webpack-dev-server
主要看 devServer
配置:
// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: "development", entry: './index.js', output: { filename: 'bundle.js' }, devServer: { contentBase: './dist', open: true,
port: 8080, hot: true }, plugins: [ new HtmlWebpackPlugin(), new CleanWebpackPlugin() ] }
// package.json
scripts: { "server": "webpack-dev-server" }
// index.js
import React, { Component } from 'react'; import ReactDom from 'react-dom'; import axios from 'axios'; class App extends Component { componentDidMount() { // 真实接口:https://www.dell-lee.com/react/api/header.json // axios.get('https://www.dell-lee.com/react/api/header.json') // .then((res) => { // console.log(res); // }) // 真实接口不要写绝对路径,如果接口路径有变动,还要到每个组件修改,麻烦 // 写相对路径,需要将前置路径放到proxy代理 axios.get('/react/api/header.json') .then((res) => { console.log(res); }) } render() { return <div>Hello World</div> } } ReactDom.render(<App />, document.getElementById('root'));
// package.json
scripts: { "server": "webpack-dev-server" }
执行 npm run server
命令,浏览器会自动打开页面。
浏览器提示 接口 404 (Not Found)
,表示该接口不存在。因为我们此时会跨域,所以会提示找不到该接口。为了解决这个问题,我们就需要设置代理,转发域名
配置 webpack.config.js
这里我只展示 devServer
代码
// webpack.config.js
devServer: { open: true, port: 8080, hot: true, hotOnly: true, proxy: { '/react/api': { target: 'https://www.dell-lee.com',
//代理https协议,不是则该属性注释掉 secure: false,
//可选,重写路径,将demo.json路径替换掉header.json pathRewrite: { 'header.json': 'demo.json' }, changeOrigin: true, } } },
配置 devServer
的 proxy
字段的参数,将请求 /react/api
开头的请求都转发到 http://localhost:8888
, 那么路径就是https://www.dell-lee.com/react/api/header.json
注意点,如果https://www.dell-lee.com/react/api/header.json这个接口后台还在修改,他把所有的假数据放在https://www.dell-lee.com/react/api/demo.json这个接口
那么我们组件中还是可以写/react/api/header.json相对路径请求,只需要在prxory中选择pathRewrite这个属性,他将demo.json替换掉header.json,
只要https://www.dell-lee.com/react/api/header.json这个接口处理好了,把pathRewrite这个属性注释掉即可
通过这个方法可以提到的本地开发的时候,前端解决接口跨域的问题,可以顺利拿到接口数据
当你要代理到某个https的接口上,就需要设置 secure: false
// webpack.config.js
devServer: { proxy: { '/api': { target: 'https://other-server.example.com', secure: false } } }
其他配置
target: '', // 代理的目标地址 secure: false, // 请求https的需要设置 changeOrigin: true, // 跨域的时候需要设置 headers: { host: 'http://www.baidu.com', //修改请求域名 cookie: '' } ...
其他关于 devServer
的配置详见 devServer
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
· 终于决定:把自己家的能源管理系统开源了!
· 外部H5唤起常用小程序链接规则整理
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 详解:订单履约系统规划