2011-12-20 9 views
4

私はRemember the Milk APIと呼ばれる小さなChrome拡張機能を開発中です。 GoogleはFlikr APIを使用してgood exampleを持っています。私はこれを私の拡張の基礎として使用しています。彼らの例は私のブラウザ(Linux上の最新のChrome)で完全に動作します。Chrome拡張機能のJavaScriptからウェブサイトAPIを呼び出すときにクロスドメインエラーが発生する

私はスワップアウトするとミルクAPIのメソッド名とAPIキーを覚えて、しかし、私は次のエラーを取得しています:

var req = new XMLHttpRequest(); 
    req.open(
      "GET", 
      "http://api.rememberthemilk.com/services/rest/?" + 
      "method=rtm.test.echo&" + 
      "api_key=xxxxxxxxxxxxxxxxxxxxxxxxxx&" + 
      "name=Test%20task", 
      true); 
    req.onload = onResponseReceived; 
    req.send(null); 

    function onResponseReceived() { 
     console.log("It worked."); 
    } 

どれ:

XMLHttpRequest cannot load http://api.rememberthemilk.com/services/rest/?method=rtm.test.echo&api_key=xxxxxxxxxxxxxxxxxxxxxx&name=Test%20task. 
Origin chrome-extension://lifnmciajdfhj is not allowed by Access-Control-Allow-Origin. 

私のコードは次のようになります提案?

答えて

7

...そして、通常通り、ここに投稿する数分以内に解決されます。問題はmanifest.jsonファイルで、元々Flikr APIのアクセス許可がありました。 Remember the Milkを指すように更新しましたが、権限を再登録するには、Extensionをアンインストールして再インストールする必要があります。

GoogleはXHR in extensionsを扱う良いチュートリアルを用意しています。

ここに更新済みmanifest.jsonがあります。多分それは誰かのために役立つでしょう。

{ 
     "name": "Remember the Milk", 
     "version": "1.0", 
     "description": "A Remember the Milk extension.", 
     "browser_action": { 
      "default_icon": "rtm.png", 
      "popup": "popup.html" 
     }, 
     "permissions": [ 
      "http://*.rememberthemilk.com/", 
      "https://*.rememberthemilk.com/" 
     ] 
    } 
0

そのヘッダにより、サーバ側から

//header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); 
// or 
header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Credentials: true"); 
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); 
header('Access-Control-Max-Age: 1000'); 
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description'); 

を許可し、また、あなたのドメインがwwwの有無redirctionオンをしている確認していることを確認します。

関連する問題