鍍金池/ 問答/HTML/ ajax跨域請求圖片

ajax跨域請求圖片

請求地址為http://favicon.byi.pw/?url=https://www.baidu.com/，想要把他返回的圖片保存起來

$.ajax({
        type : "get",
        async:false,
        url : "http://favicon.byi.pw/?url=https://www.baidu.com/",
        dataType : "jsonp",
        jsonp: "callbackparam",
        jsonpCallback:"success_jsonpCallback",
        success : function(json){
            alert(json);
            //alert(json[0].name);
        },
        error:function(){
            
        }
    });

出現(xiàn)一個錯誤
圖片描述

我是要在服務(wù)器端設(shè)置contentType么，可是我請求的是別人的服務(wù)器，有什么解決辦法么

回答
編輯回答
入她眼

jsonp 應(yīng)該不行，報錯信息也提示了，這是張圖片，不是可執(zhí)行腳本，可以換種方式：

    window.onload = function() {
        var aLink = document.createElement('a');
        aLink.;
        aLink.download = 'img';
        aLink.style.display = 'none';
        document.body.appendChild(aLink);
        aLink.click();
    };

jsonp 為什么不行，這要涉及到 jsonp 的原理了，比如一個可以通過 jsonp 訪問的 url

http://freegeoip.net/json/?callback=handleResponse

實際上這個 url 里的內(nèi)容應(yīng)該是這個樣子：

handleResponse(data);

jsonp 技術(shù)，實際上代碼是這樣：

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

很明顯，這個元素加載好了后，肯定直接執(zhí)行腳本里的代碼，實際上就是執(zhí)行

 handleResponse(data);

那么，如果你在本地腳本里定義了 handleResponse 函數(shù)

 function handleResponse(data){
     // do something about the data
 }

那你兩串代碼連在一起不就是：

 handleResponse(data);
 function handleResponse(data){
     // do something about the data
 }

那這個跨域的數(shù)據(jù)不就直接在 handleResponse 里拿到了么，，，但你這里是圖片，不是可執(zhí)行腳本，當(dāng)然會報錯

2017年8月1日 13:22
編輯回答
蝶戀花

你描述的功能和你的代碼關(guān)系不大。

你要做的事情是一個爬蟲操作，請使用服務(wù)端環(huán)境開發(fā)， Node.js, Python 等。

2017年10月29日 02:39
編輯回答
情殺

很明顯不是用jsonp，用img標(biāo)簽吧

2017年4月4日 21:59