前端跨域經驗

摘要： 介面跨域 jsonp window.name + iframe domain(主域相同) cors 跨域資源共享 CORS 詳解 重點: 1.簡單請求&複雜請求;2.cookie 圖片跨域 canvas get...

介面跨域

jsonp

window.name + iframe

domain(主域相同)

cors

跨域資源共享 CORS 詳解

重點: 1.簡單請求&複雜請求;2.cookie

圖片跨域

canvas getImageData&toDataURL 也有跨域問題

解決方法:cors

a標籤 download 跨域失效

解決思路: 通過fetch或者xhr下載下來,轉為blob,再createObjectURL

注意:諾通過axios發請求下載檔案出錯,具體原因未查

const a = document.createElement('a');
const url = "http://*******.zip";
const filename = "檔名稱";
const xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const blob = new Blob([xhr.response]);
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();
}
};
xhr.send();