Ajax 在Chrome打包应用程序中通过XHR加载本地内容_Ajax_Google Chrome_Xmlhttprequest_Google Chrome App

Ajax 在Chrome打包应用程序中通过XHR加载本地内容

ajax google-chrome

Ajax 在Chrome打包应用程序中通过XHR加载本地内容,ajax,google-chrome,xmlhttprequest,google-chrome-app,Ajax,Google Chrome,Xmlhttprequest,Google Chrome App,我正在尝试加载一个我用主干网构建的web应用程序，它会拉入本地存储的JSON和HTML模板文件。我想知道Chrome打包的应用程序是否可以通过使用某种“get”/ajax请求来加载这些文件现在我得到这个 OPTIONS chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html Cannot make any requests from null. jquery.min.js:2 XMLHttpReq

我正在尝试加载一个我用主干网构建的web应用程序，它会拉入本地存储的JSON和HTML模板文件。我想知道Chrome打包的应用程序是否可以通过使用某种“get”/ajax请求来加载这些文件

现在我得到这个

OPTIONS chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html Cannot make any requests from null. jquery.min.js:2
XMLHttpRequest cannot load chrome-extension://fibpcbellfjkmapljkjdlpgencmekhco/templates/templates.html. Cannot make any requests from null.

我找不到任何关于如何做到这一点的真实信息，因此任何帮助都将是非常感谢的

是的，这完全有可能，而且很容易。这是一个工作样本。试着从这个开始，确认它是有效的，然后添加回您自己的代码。如果你遇到了一个障碍，并提出了一个比XHR是否在打包应用程序中工作更具体的问题，你可能想问一个新问题

manifest.json：

{
  "name": "SO 15977151 for EggCup",
  "description": "Demonstrates local XHR",
  "manifest_version" : 2,
  "version" : "0.1",
  "app" : {
    "background" : {
      "scripts" : ["background.js"]
    }
  },
  "permissions" : []
}

background.js：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("window.html",
    { bounds: { width: 600, height: 400 }});
});

window.html：

<html>
<body>
  <div>The content is "<span id="content"/>"</div>
  <script src="main.js"></script>
</body>
</html>

content.txt：

Hello, world!

我相信问题出在服务器端，而不是客户端。服务器需要为jQuery发送以下标头以处理响应：

Access-Control-Allow-Origin: *

然而，问题是，现在任何页面都可以加载该内容。知道扩展的ID后，可以将该标题更改为以下内容：

Access-Control-Allow-Origin: chrome-extension://gmelhokjkebpmoejhcelmnopijabmobf/

对以下内容进行的简短测试表明这些方法有效：

<h1>Content Below</h1>
<div id="loadme"></div>
<script src="jquery-1.9.1.min.js"></script>
<script src="app.js"></script>

// app.js
$(document).ready(function() {
  $.get('http://localhost:8080/content.php', function(data) {
    $('#loadme').html(data);
  });
});

一旦我在php响应中添加了

访问控制允许源代码头，它就工作得很好
同样，将此设置为*
可能会带来安全风险，因为任何地方的任何浏览器页面都可以内联加载。
您是从沙盒页面发出请求，而沙盒页面的原点为空
我已经把这个问题贴在谷歌集团上了
除非Chrome决定更改沙盒策略，否则唯一的解决方法似乎是从非沙盒页面发出XHR请求，并使用Chrome的消息传递API将其提供给沙盒页面
我不知道为什么这么难
编辑：
Chrome团队的任务是将CORS标题更改为*为什么您的源代码为空？如果您从打包应用程序中的标准窗口对应用程序中的文件执行XHR，它会工作。我的源代码似乎为空，因为我的应用程序有一个沙箱页面，它是一个webapp。此webapp加载一个xml文件作为其数据源。但这似乎不起作用。我将如何执行XHR请求？太好了！这确实有效。我的网络应用程序仍有问题。我需要使用不同版本的jquery吗？目前我使用的是1.9。另外，我在使用backbone.js和对我的收藏进行fetch调用时遇到了问题……有什么想法吗？jQuery 1.9非常好用；它完全符合CSP标准。是Chrome打包应用程序的一个例子，它愉快地使用jQuery。我大约80%确定主干网可以与CSP一起工作，但它可能需要一些修改（不确定，没有使用过）。正如我在回答中所说的，采取一些小的步骤——从工作代码开始，不断添加新的内容，直到出现问题，然后后退一步。祝你好运，我完全同意。出于这个原因，我实际上决定不使用chrome打包的应用程序。我转到node webkit，它为我的应用程序提供了更多的选项。括号shell也是一个值得一看的选项。括号shell非常好。我也喜欢他们咕哝的任务。从他们身上可以学到很多东西。
<h1>Content Below</h1>
<div id="loadme"></div>
<script src="jquery-1.9.1.min.js"></script>
<script src="app.js"></script>

// app.js
$(document).ready(function() {
  $.get('http://localhost:8080/content.php', function(data) {
    $('#loadme').html(data);
  });
});

XMLHttpRequest cannot load http://localhost:8080/newhope/deleteme.php.
Origin chrome-extension://gmelhokjkebpmoejhcelgkfeijabmobf is not allowed by
Access-Control-Allow-Origin.