资讯专栏INFORMATION COLUMN

前端跨域经验

_ivan / 2984人阅读

摘要:接口跨域主域相同反向代理去除跨域跨域资源共享详解重点简单请求复杂请求图片跨域也有跨域问题解决方法标签跨域失效解决思路通过或者下载下来转为再注意如果通过发请求下载文件出错具体原因未查文件名称

接口跨域 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();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103924.html

相关文章

  • 2019前端秋季社招面试经历总结(三年经验

    摘要:经历月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。现在是面试了家公司左右,有些高频问题会标记次数总次数,可供大家参考。最后祝大家面试顺利,拿到心仪的,写错的地方请不吝赐教,谢谢。 经历 7月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。一开始广泛看面试题,没抓住重点复习,有很多平时也没怎么用到,导致一开始面试的时候,问的问题...

    Kross 评论0 收藏0
  • 2019前端秋季社招面试经历总结(三年经验

    摘要:经历月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。现在是面试了家公司左右,有些高频问题会标记次数总次数,可供大家参考。最后祝大家面试顺利,拿到心仪的,写错的地方请不吝赐教,谢谢。 经历 7月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。一开始广泛看面试题,没抓住重点复习,有很多平时也没怎么用到,导致一开始面试的时候,问的问题...

    DevWiki 评论0 收藏0
  • 2019前端秋季社招面试经历总结(三年经验

    摘要:经历月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。现在是面试了家公司左右,有些高频问题会标记次数总次数,可供大家参考。最后祝大家面试顺利,拿到心仪的,写错的地方请不吝赐教,谢谢。 经历 7月份开放的简历,收到了蛮多询问和面试,算是招人旺季,需要跳槽的小伙伴抓住机会。一开始广泛看面试题,没抓住重点复习,有很多平时也没怎么用到,导致一开始面试的时候,问的问题...

    solocoder 评论0 收藏0
  • 前端经验 - 收藏集 - 掘金

    摘要:我拖拖拖拖放基础篇前端掘金不要搞错,本文不是讲如何拖地的。结构说明前端应该从哪些方面来优化网站前端掘金不知道是哪位大牛的文章,转过来回答。 我拖拖拖 --H5 拖放 API 基础篇 - 前端 - 掘金不要搞错,本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见...

    MudOnTire 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<