1. Trang chủ
  2. Câu hỏi và trả lời
  3. Lỗi 'Không cho phép xuất xứ' do lỗi Access-Control-Allow-Origin '

Lỗi 'Không cho phép xuất xứ' do lỗi Access-Control-Allow-Origin '

2016-09-02 13 views
17 
img = new Image(); 

img.crossOrigin = "anonymous"; 

try { 
    cimg.src = document.getElementById("url").value; 
} 
catch(err) { 
    alert("Cannot access image.Cross-Domain access blocked"); 
};

Vì vậy, tôi muốn phát hiện/bắt lỗi chặn truy cập Cross-Domain.Lỗi 'Không cho phép xuất xứ' do lỗi Access-Control-Allow-Origin '

Sau khi một số suy nghĩ tôi phát hiện ra rằng nó src tải là async & do đó khối catch sẽ không hoạt động. Có cách nào để phát hiện lỗi để tôi có thể xử lý nó một cách hiệu quả?

Nguồn

2016-09-02 Debanjan Dhar

+7

Bạn có thể tải hình ảnh có nguồn gốc chéo, bạn không thể đọc pixel của chúng. Vì vậy, một lỗi cors sẽ không bao giờ xảy ra trong quá trình tải img. –

+1

Vì vậy, về bản chất cors xảy ra sau khi tải hình ảnh? Làm thế nào để tôi phát hiện cors sau khi img tải chúng? : $ Tôi cần phân biệt giữa tải xuống cors & img do url xấu –

+2

@DebanjanDhar - để làm rõ, bạn muốn kiểm tra xem hình ảnh bạn tải CÓ THỂ được "thao tác" không chỉ là tài nguyên được hiển thị trong '' hoặc '' thẻ. Đúng không? –

Trả lời

12

Khi @TamasHegedus nhận xét, hình ảnh vẫn có thể được tải với lỗi CORS, nhưng nó không cho phép xử lý dữ liệu hình ảnh. Điều đó có nghĩa là bạn có thể sử dụng canvas để cố gắng thao tác hình ảnh và nắm bắt bất kỳ lỗi nào bị ném.

Kỹ thuật này sẽ hoạt động đối với hình ảnh được hỗ trợ canvas. Xem @Kaiido 's answer nếu bạn muốn thay thế đơn giản hơn bằng cách sử dụng thuộc tính Image#crossOrigin. Giải pháp của anh ta cũng phát hiện xem thuộc tính có được hỗ trợ hay không và sử dụng canvas khi cần thiết.

// Must work in IE9+. 

var img = new Image; 

img.onload = function() { 

    var canvas = document.createElement('canvas'); 

    // resize the canvas, else img won't be rendered 
    canvas.width = img.width; 
    canvas.height = img.height; 

    // get the canvas rendering context 2d 
    var ctx = canvas.getContext('2d'); 

    // draw the image first 
    ctx.drawImage(img, 0, 0); 

    try { 
     /* get first pixel */ 
     ctx.getImageData(0, 0, 1, 1); 

     /* no error catched – no cors error */ 
     alert("Cross-domain access available."); 

    } catch (e) { 
     alert("Cross-domain access blocked."); 
    } 
}; 

img.src = 'https://i.stack.imgur.com/Kt3vI.png?s=48&g=1';

Nguồn

2016-09-02 14:39:28 Hydro

+1

Bạn có thể vẽ hình ảnh hoàn toàn không có màn hình, ở độ rộng 0 0 px và nó vẫn sẽ làm mờ khung hình của bạn. Và một khi vải được sơn, bạn không thể làm nổi bật nó. Trong cùng một tinh thần, không cần phải lấy imageData có kích thước đầy đủ, một pixel sẽ kích hoạt Ngoại lệ. – Kaiido

4

Trong các trình duyệt hỗ trợ các yêu cầu crossOrigin, (mà nên được ưa thích những người thân), nếu bạn đặt crossOrigin-'anonymous', và cố gắng thiết lập src phần tử của bạn trỏ đến một tập tin lưu trữ trên một máy chủ không đúng thiết lập, các load sự kiện sẽ không kích hoạt và thay vào đó, sự kiện error sẽ diễn ra. Điều quan trọng là phải hiểu rằng trong trường hợp yêu cầu crossOrigin thất bại, máy chủ sẽ trả lời trực tiếp rằng nó không chấp nhận yêu cầu, vì vậy chỉ các tiêu đề được gửi giữa người dùng và máy chủ ở xa, trong khi thực hiện cách xung quanh (đầu tiên thử mà không có yêu cầu crossOrigin, sau đó thử với), bạn phải tải xuống hoàn toàn * tài nguyên, sau đó tải xuống lại với tập hợp thuộc tính chéo ...

Tương tự áp dụng cho âm thanh, video và xhr yêu cầu.

Vì vậy, trước tiên, bạn nên đặt crossOrigin của các yêu cầu gốc xuất phát, sau đó nếu nó không thành công, nghĩa là mặt khác không được định cấu hình đúng cách.

var img = new Image(); 
 
if('crossOrigin' in img){ 
 
    // an up to date browser 
 
    // make a single crossOrigin request 
 
    img.crossOrigin = 'anonymous'; 
 
    img.onerror = handleCORSFailure; 
 
    } 
 
else{ 
 
    // for browser that don't support the crossOrigin request 
 
    var ctx = document.createElement('canvas').getContext('2d'); 
 
    ctx.width = ctx.height = 1; // no need to use too much memory, 1*1 px is enough 
 
    img.addEventListener('load', function(){ 
 
    ctx.drawImage(this,0,0); 
 
    try{ 
 
     ctx.getImageData(0,0,1,1); 
 
     } 
 
    catch(e){ 
 
     handleCORSFailure(e); 
 
     return; 
 
     } 
 
    }); 
 
    } 
 

 
img.src = 'https://i.stack.imgur.com/Kt3vI.png?s=48&g=1'; 
 

 
function handleCORSFailure(e){ 
 
    if(e.target){ 
 
    console.log('server not set correctly'); 
 
    } 
 
    else{ 
 
    console.log("browser doesn't support crossOrigin requests"); 
 
    } 
 
}

- * Trên thực tế, hình ảnh chỉ cần được tải về hoàn toàn, tất cả các nguồn lực khác có thể được kiểm tra trước khi kết thúc.

Ps: trong trường hợp có cùng yêu cầu gốc, thuộc tính crossOrigin không bị tổn thương, vì vậy, kiểm tra này vẫn có thể được thực hiện.

Nguồn

2017-01-14 03:44:58 Kaiido

Các vấn đề liên quan

 Các vấn đề liên quan