版權(quán)聲明：本文原創(chuàng)恕稠，轉(zhuǎn)載請(qǐng)注明出處 http://www.reibang.com/p/f5d5bdde00a7
IE 瀏覽器真是不合群又不懂事，讓無(wú)數(shù)開(kāi)發(fā)者操碎了心啊···
本文會(huì)持續(xù)補(bǔ)充遇到的相關(guān)IE兼容問(wèn)題和解決方案：狄住（兼容>=IE9）
背景
生產(chǎn)環(huán)境
vue 2.5.10 index.html中以cdn方式引入
axios 0.18.0
1. 老生常談的 ES6 語(yǔ)法兼容（通常表現(xiàn)為頁(yè)面空白） —— babel-polyfill
安裝依賴(lài)
npm install babel-polyfill --save-dev
在 webpack.base.conf.js 中按照以下內(nèi)容修改
module.exports = {
...
entry: {
app: ['babel-polyfill', './src/main.js']
}
}
在入口文件 main.js 引入
我其實(shí)沒(méi)有引入麸塞，babel-polyfill 仍然生效了休蟹，你們可以試試者冤；
import "babel-polyfill"
2. IE 瀏覽器 POST 請(qǐng)求沒(méi)反應(yīng)
安裝依賴(lài)
npm install url-search-params-polyfill --save
在入口文件 main.js 引入
import 'url-search-params-polyfill'
3. IE9 請(qǐng)求報(bào)錯(cuò) “拒絕訪問(wèn)”
雖然服務(wù)器那邊已經(jīng)設(shè)置了Access-Control-Allow-Origin: *;，查閱資料發(fā)現(xiàn) ie8/9 不支持cors跨域方案徙赢，具體參考這里
方法一（不切實(shí)際）
設(shè)置瀏覽器安全屬性字柠，啟用【通過(guò)域訪問(wèn)數(shù)據(jù)源】選項(xiàng)滑进；但肯定不能要求用戶(hù)去設(shè)置啊...
方法二
服務(wù)器設(shè)置反向代理，但沒(méi)有嘗試募谎，不好意思..
或者：
判斷瀏覽器是IE9的話(huà)，api發(fā)送請(qǐng)求到本域数冬，本域?qū)⒄?qǐng)求轉(zhuǎn)發(fā)至目標(biāo)服務(wù)器
其他
參考這里
開(kāi)發(fā)環(huán)境的解決方法
如果是開(kāi)發(fā)環(huán)境的話(huà)，就給webpack配置代理就可以解決跨域拐纱；
在
config/index.js 添加如下：
module.exports = {
dev: {
...
proxyTable: {
'/api':{
target: 'https://www.domain.com/api', // 后臺(tái)api地址
changeOrigin: true,
pathRewrite: {
'/api': ''
}
}
}
}
}
這里注意 config/dev.env.js 中如果配置了請(qǐng)求URL的 BASE_API ，這個(gè)值也應(yīng)該換成 /api秸架；
4. IE 瀏覽器 GET 請(qǐng)求緩存的問(wèn)題
我說(shuō)我明明剛添加完一項(xiàng)數(shù)據(jù)揍庄，為什么再打開(kāi)頁(yè)面刷新的時(shí)候沒(méi)有呢？东抹？
都是ie這不合群的瀏覽器緩存get請(qǐng)求搞的鬼！
現(xiàn)提供兩種我已經(jīng)測(cè)試過(guò)的方法缭黔；
以下兩種方法都是在封裝axios請(qǐng)求攔截器中修改；
方法一
設(shè)置請(qǐng)求頭馏谨，禁止緩存
const service = axios.create({
headers: {
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
}
})
方法二
get請(qǐng)求的參數(shù)中增加時(shí)間戳或是隨機(jī)數(shù)
service.interceptors.request.use(
config => {
if (config.method === 'get') {
config.params = {
...config.params,
_t: new Date().getTime()
}
}
}
)
