javascript - Cordova 文件传输未命中服务器端点

Question

我正在尝试使用 FT(cordova 文件传输)创建一个文件，以将文件发送到我的 Express 应用程序。 问题是， express 没有收到请求。有一个点它有效，但它停止工作，我试图找出原因。

我的代码如下所示。

首先我用 cordova lib 拍了张照片，这有效。

    $scope.takePicture = function(){
          Camera.getPicture().then(function(imageURI) {
            $scope.lastPhoto = imageURI;
            upload(imageURI)
          }, function(err) {
            console.err(err);
          }, {
            quality: 25,
            targetWidth: 320,
            targetHeight: 320,
            saveToPhotoAlbum: false
          });
    };

但是上传功能没有向 Express 服务器发出请求。

upload = function (imageURI) {
    var ft = new FileTransfer();
    var options = new FileUploadOptions();

    options.fileKey = "photo";
    options.fileName = 'filename'; // We will use the name auto-generated by Node at the server side.
    options.mimeType = "image/jpeg";
    options.chunkedMode = false;
    options.httpMethod = 'put';
    options.params = { // Whatever you populate options.params with, will be available in req.body at the server-side.
        "description": "Uploaded from my phone"
    };

    ft.upload(imageURI, encodeURI(RESOURCES.PRODUCTION_DOMAIN + '/api/boats/' + $scope.boat._id),
        function (e) {
            console.log('File Transfer Completed', e)
        },
        function (e) {
            alert("Upload failed", e);
        }, options);
}

我没有看到请求进入我的服务器，并且我看到 console.log 失败。

这是为什么？

我的服务器有以下访问控制方法

    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST', 'PUT', 'DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header('Access-Control-Allow-Credentials', true);
    next();

我有

    <access origin="*"/>

在我的应用程序的 config.xml 中。

为什么请求没有通过!？

编辑

让应用程序在 x 代码中运行后(下载了新版本...) 我看到错误如下。

2015-10-26 05:00:54.955 Fish App[358:68325] File Transfer Finished with response code 404
2015-10-26 05:00:54.956 Fish App[358:68325] FileTransferError {
    body = "";
    code = 3;
    "http_status" = 404;
    source = "file:///var/mobile/Containers/Data/Application/598EAE4A-F0E4-4A3B-A4A4-0DB657981122/tmp/cdv_photo_010.jpg";
    target = "http://example.com/api/boats/";
}

还需要注意的是，我必须将 nginx 设置配置为允许大于 1M 的文件大小，然后我才收到上述错误。为什么是404？目标是正确的。

我的 plist 中有以下内容以允许所有连接...

<key>NSAppTransportSecurity</key>
<dict>
  <!--Include to allow all connections (DANGER)-->
  <key>NSAllowsArbitraryLoads</key>
      <true/>
</dict>

编辑2:

我在我的 index.html 中添加了 CSP 策略，这似乎是最不安全的方法，我认为这可以让我通过上传!

<!-- This policy allows everything (eg CSS, AJAX, object, frame, media, etc) except that 
* CSS only from the same origin and inline styles,
* scripts only from the same origin and inline styles, and eval()
-->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; img-src '*' script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Answer 1

UPDATE 2016-04-11: Google will soon require new and updated Apps that use Cordova/Phonegap be at least 4.1.1 Details: Android pre-4.1.1 to be blocked

您需要添加白名单、插件和 CSP。 或者将版本设置为您的编译器。

修复许多常见的白名单问题

白名单的替代方案是这个快速修复 - 但要知道这个快速修复消除了 white-list 的所有需求。这将创建一个 security issue您可能不想绕过它。

快速修复将此添加到您的 config.xml仅适用于 PHONEGAP 构建
<preference name="phonegap-version" value="3.7.0" />
此方法在 2016 年 5 月之后将不再可用。

长答案如下:

来自Top Mistakes by Developers new to Cordova/Phonegap您已点击:

• #6 未为编译器设置“phonegap 版本”
• #7 没有为您的插件设置“版本”
• #10 不在 config.xml 中添加新的“白名单”和“白名单插件”参数。

对于#6 和#7

With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading errors.

Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

Cordova/PhoneGap Version Confusion
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

对于#10

This relatively * NEW * requirement means – to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect, if you are using cordova-android@4.0.0 or better; including cli-5.1.1 and cli-5.2.0. If however, your version is before 4.0.0, let's say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. Depending on your use and the version of Phonegap you are using, the CSP needs to go in every single HTML page you used, just like you have to wait for 'deviceready'. However, there are cases where it is not needed at all. The documentation is confusing for some, please read it carefully. The documentation is buried in the bottom of many of the latest documentation pages.

Lastly, Raymond Camden in his blog points to a LARGE change in policy starting with Cordova 5

相关链接

Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist

• Cordova Whitelist Guide
• Phonegap Whitelist Guide
• Phonegap Build Whitelist Guide