前端跨域经验

接口跨域

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