前端跨域經驗

接口跨域

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