一、WebpackDevServer实现请求转发
背景：请求跨域
处理：借助devServer.proxy进行转发配置
配置如下：
devServer: {
contentBase: './dist', //起一个位于当前目录下的服务器。
open: true, //打开默认浏览器
hot: true, //开启webpack中hot module replacement的功能
hotOnly: true //当webpack的HMR没有生效时，也不进行页面的刷新等其他行为。
//这样配置就可以解决请求跨域的问题了，如果需要配置其他项，可以使用下面的写法。
//proxy: {
// '/react/api': 'https://www.dell-lee.com'
//}
proxy: {
'/react/api': {
target: 'https://www.dell-lee.com',
secure: false, // 搭配https的转发请求使用，避免证书不合法
pathRewrite: {
'header.json': 'demo.json' //路径重写，实际*问的是demo.json的路径来获取数据
},
changeOrigin: true,
headers: {
host: 'www.dell-lee.com',
}
}
}
},
changeOrigin：有些站点会对origin做一些限制，避免被爬虫爬取，如果拿不到数据时，可以尝试将该项设置为true，来打破这种限制。
相关代码：
index.js:
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
class App extends Component {
componentDidMount() {
axios.get('/react/api/header.json')
.then((res) => {
console.log(res);
})
}
render() {
return <div>Hello World</div>
}
}
ReactDom.render(<App />, document.getElementById('root'));
二、WebpackDevServer解决单页面应用路由问题
问题：
index.js是入口文件，有两个页面，home，list，页面跳转使用路由。
（1）当访问路径是根路径时，可以跳转到首页home
（2）当url访问list页时，为什么会跳转不到页面呢？？？
分析：这样请求时，服务器会认为你是想访问list.html的页面，看目录中只有index.html页面，所以访问不到
处理：historyApiFallback: true
devServer: {
contentBase: './dist',
open: true,
port: 8080,
hot: true,
hotOnly: true,
historyApiFallback: true,
proxy: {
'/react/api': {
target: 'https://www.dell-lee.com',
secure: false,
pathRewrite: {
'header.json': 'demo.json'
},
changeOrigin: true,
headers: {
host: 'www.dell-lee.com',
}
}
}
},
配置之后，服务器上根据路径获取不到的页面都会打到index.html上，main.js中就是我们打包的包含路由跳转的业务代码，应用就会生效。
还可以重写页面指向，上面配置的true，实际上就是将/abc.html/改成了/\.*/