Chrome 应用 jquery AJAX 请求未发送自定义标头答案

【问题标题】：Chrome app jquery AJAX request not sending custom headersChrome 应用 jquery AJAX 请求未发送自定义标头
【发布时间】：2014-08-26 20:18:48
【问题描述】：

我正在开发一个 Chrome 应用程序，它使用 jquery.ajax 向我的 API 发出一系列请求。使用清单中设置的 api 的 url 权限，这工作得很好：

"permissions": [ 
    "https://example.com/*",
    "http://example.com/*"
]

但是，当我尝试将其上传到 Chrome 开发人员仪表板时，我收到错误：

The field permissions.https://example.com/ is not allowed in manifest.

我认为这是因为 Chrome 应用程序正在迁移到 CORS 模型，尽管 url 权限仍然是 shown in the documentation。我正在尝试实现 CORS。

{
    "name": "My Extensions",
    "version": "1.0.7.5",
    "manifest_version": 2,
    "app": {
        "launch": {
            "local_path": "pages/index/index.html"        
        }
    },
    "description": "Extension description.",
    "content_security_policy": "script-src 'self'; object-src 'self'; connect-src self https://example.com http://example.com",
    "icons": {
        "16": "images/msp-16.png",
        "128": "images/msp-128.png",
        "256": "images/msp-256.png"
    },
    "minimum_chrome_version": "14",
    "permissions": [ 
        "tts",
        "unlimitedStorage",
        "storage"
    ]
}

还有ajax请求：

$.ajax({
    cache: false,
    crossDomain: true,
    async: false,
    headers: {
        'apikey': 'myapikey'
    },
    url: 'https://example/api/auth/',
    type: 'POST',
    data: {
        data: xmlToSubmit
    },
    success: function(xml) {

        //Do the thing

    },
    error: function(xhr) {

        //Do the other thing

    }
});

我已经阅读了很多文档，包括 HTML Rocks。我正在发送一个自定义标题“apikey”。服务器当前配置为：

Header set Access-Control-Allow-Origin: "*"
Header set Access-Control-Allow-Methods: "POST, GET, OPTIONS"
Header set Access-Control-Allow-Headers: "apikey"

当我从应用程序发出请求时，由于未发送 apikey 标头而返回错误。我收到了 api 生成的预期 xml 错误消息。我已经使用 Fiddler 进行了检查，并且没有发送 apikey 标头。我可以使用其他 Chrome 扩展 REST 客户端向我的 api 发送成功的请求，并且我不需要为其他向 api 发送请求的应用设置服务器标头，也不需要在我使用原始权限时设置。

我错过了什么？只是预检失败吗？我是否遗漏了原始权限中允许上传的明显内容？

【问题讨论】：

我不确定你的问题是什么。
啊哈。这很有趣。您的清单对应于“旧版打包应用程序”，因为它具有 app.launch 键而不是 app.background 键。 This blog post 解释了为什么您的初始清单不起作用。您没有使用新式 Chrome 应用程序有什么原因吗？
不会加载大括号，应该是方括号：[link]developer.chrome.com/extensions/manifest
我知道，这是个愚蠢的猜测。
在 Chrome 中工作！= 在 Chrome 网上应用店上发布。通常，弃用计划会分阶段进行，一个是删除发布支持，另一个是最终删除客户端支持。猜猜我们现在处于哪个阶段。

标签： javascript ajax cors google-chrome-app chrome-web-store

【解决方案1】：

这已通过 @xan 和 @sowbug 的暗示解决。通过更改清单以将启动后台脚本调用为“新”打包应用程序，并进行一些小的代码更改，这是一个梦想：

"app": {
    "background": {
        "scripts": ["launch.js"]
    }
},

访问 api 的 url 权限已添加回清单中

"permissions": [ 
    ...
    "https://example.com/",
    "http://example.com/",
    ....
],

我还必须从 jquery AJAX 请求中删除此设置：

async: false;

在I read this之后。

【讨论】：