跨域问题以及几种解决方案

最新推荐文章于 2024-10-12 17:33:26 发布

ericohe

最新推荐文章于 2024-10-12 17:33:26 发布

阅读量219

点赞数

分类专栏： html JavaScript

本文链接：https://blog.csdn.net/Ericohe/article/details/107820274

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

显示错误如下：

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案：

1. 设置 crossOrigin

drawing = new Image();
drawing.src = imgSrc; // can also be a remote URL e.g. http://
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
//drawing.crossOrigin = '';
drawing.setAttribute("crossOrigin",'Anonymous');
drawing.onload = function() {
   ctx.drawImage(drawing,0,0);
};

如果服务器没有设置：Access-Control-Allow-Origin，基本无效

2. html2canvas

代码 https://github.com/niklasvh/html2canvas

html2canvas(document.getElementById("id"), {scale: 1, logging: false, useCORS: true, allowTaint: false, proxy: '跨域url'}).then(function(canvas){
//do something
});

原理是利用canvas屏幕截图，对于png文件的url会丢失信息。