前端跨域履历

接口跨域

jsonp

window.name + iframe

domain(主域雷同)

postMessage、WebSocket

反向代办(去除跨域)

location ^~ /api {
rewrite /api/(.+)$ /$1 break;
proxy_pass http://oneApiUrl.com/;
index index.js index.html index.htm;
proxy_buffer_size 128k;
proxy_buffers 64 64k;
proxy_busy_buffers_size 256k;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

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();