1.antd-pro 配置請求代理
新項目中使用antd-pro框架,所以接下來會寫一些關於antd-pro的踩坑
antd-pro中用的是fetch來實現http請求,封裝成功一個request方法,在本地聯調的時候需要該代理,通過本地服務器來請求后端服務,在部署到線上時需要使用nginx做反向代理
需要在config/config.js 添加下面代碼
proxy: {
'/api/': { //匹配所有以/api/為開頭的接口
target: 'http://xxxx/', //后端服務器地址
changeOrigin: true,
pathRewrite: { '^/api/': '' }, //因為我們項目的接口前面並沒有api 所以直接去掉
},
},
關於changeOrigin這個選項:
如果后端服務托管在虛擬主機的時候,也就是一個IP對應多個域名,需要通過域名區分服務,那么參數changeOrigin必須為true(默認為false),這樣才會傳遞給后端正確的Host頭,虛擬主機才能正確回應。否則http-proxy-middleware會原封不動將本地HTTP請求發往后端,包括Host: localhost而不是Host: httpbin.org,只有正確的Host才能使用虛擬主機,不然會返回404 Not Found。
一般情況下直接設置為true就可以了
可能會遇到掛設代理還是無法請求真實接口的情況,可以用 npm run start:no-mock 試試看
2.打包配置(配置二級目錄路由)
hash
history
3.使用overflow:scroll;(windows系統會有問題)
