Question

我最近对谷歌Chrome扩展程序感兴趣，所以我开始研究基础知识。

使用"Getting Started" page，我开始阅读整个内容，并在本地编写整个代码以创建解压扩展。

我确保所有文件都存在，并且代码与“使用入门”页面上提供的代码完全相同。出于某种原因，我收到以下错误：

XMLHttpRequest cannot load http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=90485e931f687a9b9c2a66bf58a3861a&text=hello%20world&safe_search=1&content_type=1&sort=relevance&per_page=20. 
Origin chrome-extension://hcijmehjcijoldbgapgllpmhebeaiihh is not allowed by Access-Control-Allow-Origin.

我确保我的权限设置为“http://api.flickr.com/”，如“使用入门”页面中所述，以及我能找到的其他任何文档。我也知道Access-Control-Allow-Origin规则是什么，处理请求头包含的方式。但是，鉴于我的manifest.json文件中有适当的权限，我不确定为什么在这种情况下我收到此错误。我考虑过这可能与本地的某些事情有关，也许是一个配置问题或诸如此类的东西 - 但我不知道还有什么地方可以看。

我的问题是：如何解决此错误？

我正在运行Google Chrome版本15.0.874.121 m

为完整起见，这是使用的代码：

的manifest.json：

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "The first extension that I made.",
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
    },
    "permissions": [
        "http://api.flicker.com/"
    ]
}

popup.html：

body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}



var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text=hello%20world&" +
        "safe_search=1&" +  // 1 is "safe"
        "content_type=1&" +  // 1 is "photos only"
        "sort=relevance&" +  // another good one is "interestingness-desc"
        "per_page=20",
    true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
      ".static.flickr.com/" + photo.getAttribute("server") +
      "/" + photo.getAttribute("id") +
      "_" + photo.getAttribute("secret") +
      "_s.jpg";
}

Answer 1

仔细查看manifest.json中的权限。我想你会有更好的运气：

  "permissions": [
    "http://api.flickr.com/"
]

按照“入门”示例，但获取Access-Control-Allow-Origin错误

1 个答案: