クロスドメイン問題及びいくつかの解決案

1027 ワード

エラーを表示するには以下のとおりです.
has been blocked by CORS policy:No'Access-Coontrol-Origin'header is present on the requested reource.
ソリューション:
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-Coontrol-Allow-Originは基本的に無効です. 
2. httml 2 canvas
コード 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は情報をなくします.
3.究極の大殺人器はnginx逆代理を利用する.
参考:
https://www.jianshu.com/p/f9f4a0d1ddd9
4. WebSocketプロトコル