Flickr JSONがJavaScriptのクロスドメインでエラーを返す

Question

私はこのコードを持っていますが、私はFlickr APIを返そうとしていますが、次のエラーが発生します。ブロックされた

クロスオリジン・リクエスト：同一生成元ポリシーが http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=jsonで リモートリソースを読ん禁止します。 これは、リソースを同じドメインに移動するか、または CORSを有効にすることで修正できます。

私のコードでこれを有効にするにはどうすればよいですか？

enter 
MyFeed.prototype.getFeed = function(data) { 

    console.log(f.feedUrl); 
    var request = new XMLHttpRequest(); 
    request.open('GET', f.feedUrl, true); 

    request.onload = function() { 
     if (request.status >= 200 && request.status < 400) { 
      // Success! 
      console.log(request.responseText); 
      var data = JSON.parse(request.responseText); 
     } else { 
      // We reached our target server, but it returned an error 
      console.log("error"); 
     } 
    }; 

    request.onerror = function() { 
     // There was a connection error of some sort 
    }; 

    request.send(); 
}here 

Answer 1

これ、あなたがリソースを取得するためにXMLHttpRequestを使用していないJSONPを使用しているので、あなたは適切なのsrc URLとscript要素を注入し、呼び出されますjsoncallbackパラメータに割り当てられた同じ名前の関数を定義しますスクリプトがロードされた後：

function handleTheResponse(jsonData) { 
    console.log(jsonData); 
} 

// ... elsewhere in your code 

var script = document.createElement("script"); 
script.src = f.feedUrl; 
document.head.appendChild(script); 

ちょうどあなたがjsoncallback=handleTheResponseを持っている（または、あなたのメソッドを呼び出して何でも）を確認して、この方法はグローバルにアクセス可能であることを確認し、あなたが行ってもいいはずです。それを解決する複数の方法、jQueryのを使用されるだろう簡単なものがあります

function handleTheResponse(data) { 
 
    document.getElementById("response").textContent = JSON.stringify(data,null,2); 
 
} 
 

 
var script = document.createElement("script"); 
 
script.src = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=handleTheResponse&tags=london&tagmode=any&format=json" 
 
document.head.appendChild(script);

<pre id="response">Loading...</pre>

Answer 2

;：

はここでデモです

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= {コールバック} &タグ=ロンドン& tagmode =任意&形式= JSON

コールバック= "jQuery111203062643037081828_1446872573181"

enter 
MyFeed.prototype.getFeed = function(data) { 

    $.ajax({ 
    url: f.feedUrl, 
    dataType : "jsonp", 
    success: function(response) { 
     console.log(response); 
    }, 
    error: function (e) { 
     console.log(e); 
    } 
    }); 
}here 

たりする場合にコールバックを想定

jQueryなしでこれをしたい@ダニエル・フリントが推奨したもの。

function jsonp(url, callback) { 
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random()); 
    window[callbackName] = function(data) { 
     delete window[callbackName]; 
     document.body.removeChild(script); 
     callback(data); 
    }; 

    var script = document.createElement('script'); 
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName; 
    document.body.appendChild(script); 
} 

jsonp('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=callback&tags=london&tagmode=any&format=json', callback); 

function callback(data){ 
console.log(data); 
}