使用Jquery Mobile创建Cordova APP，在Android Device上调试时出现错误

Question

我下载了 jquery Mobile 1.4.5，并在 Visual Studio 2015 年使用它创建了一个 Cordova APP。当我想调试的时候，它可以在Android设备上运行，但是这里报错：

Refused to load the image 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' because it violates the following Content Security Policy directive: "default-src *".

Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

jquery.mobile-1.4.5.min.js (3,20607)

不知道为什么jquery手机javascript有问题。有人能帮我吗？谢谢。

更新： index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <title>jQuery Mobile</title>
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>

    <div data-role="page" id="page">
        <div data-role="header">
            <h1>PageTransition</h1>
        </div>
        <div role="main" class="ui-content">
            <p><a href="#page2" data-transition="fade">Fade</a></p>
            <p><a href="#page2" data-transition="flip">Flip</a></p>
            <p><a href="#page2" data-transition="flow">Flow</a></p>
            <p><a href="#page2" data-transition="pop">Pop</a></p>
            <p><a href="#page2" data-transition="slide">Slide</a></p>
            <p><a href="#page2" data-transition="slidedown">Slidedown</a></p>
            <p><a href="#page2" data-transition="slidefade">Slidefade</a></p>
            <p><a href="#page2" data-transition="slideup">Slideup</a></p>
            <p><a href="#page2" data-transition="turn">Turn</a></p>
            <p><a href="#page2" data-transition="none">None</a></p>
        </div>
        <div data-role="footer">
            <h4>PageTransition</h4>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="header" data-add-back-btn="true">
            <h1>PageTransition</h1>
        </div>
        <div role="main" class="ui-content"> Back </div>
        <div data-role="footer">
            <h4>PageTransition</h4>
        </div>
    </div>
</body>
</html>

index.js

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {

    };

} )();

Answer 1

来自您的 html 代码中的 <meta http-equiv="Content-Security-Policy" ... />。您的内容安全策略不允许 data: 方案。

要解决此问题，您可以在 default-src * 之后添加 data:，如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src * data: ; ...>

有关使用内容安全策略的详细信息，请参阅Content Security Policy Reference。

使用Jquery Mobile创建Cordova APP，在Android Device上调试时出现错误

Using Jquery Mobile create Cordova APP, there is an error when debug on Android Device

jquery-mobile

cordova

visual-studio-cordova

visual-studio-2015