Phonegap - 构建后出现错误 404答案

【问题标题】：Phonegap - error 404 after buildPhonegap - 构建后出现错误 404
【发布时间】：2016-02-02 15:24:54
【问题描述】：

我正在尝试发送 HTTP GET 请求，并且在我进行测试时一切正常。但是当我构建应用程序并尝试发送请求时，我收到 404 错误。

这是我的 index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <access origin="*" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://google.com">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">



            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();


        var start = Date.now();
        var xmlhttp;

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
                if(xmlhttp.status == 200){
                    //alert(Date.now() - start);
                    alert("yeah");

                }
                else if(xmlhttp.status == 400) {
                    alert('There was an error 400');
                }
                else {
                    alert("else: " + xmlhttp.status);
                }
            }
        }


 xmlhttp.open("GET", "http://google.com", true);
 xmlhttp.send();



    </script>
</body>

我是 PhoneGap 的新手，我确信这很简单，但我在 google 上找不到任何东西。

提前致谢

【问题讨论】：

http://myserver/ping 是一个有效的网址吗？你确定那里没有.com 或端口号之类的东西吗？
是的，它是一个开放的 api，所以我不想发布真正的 url

标签： android cordova

【解决方案1】：

您可能需要在 index.html 中设置内容安全策略元标记，因为 Cordova / PhoneGap 5 或更高版本需要这样做。

示例如下所示（在 index.html 的头部）：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://myserver">

为您尝试访问的服务器交换http://myserver。如果这是您的问题，您实际上可能会在 JS 控制台中收到类似这样的错误消息：

Refused to connect to ‘http://myserver/ping' because it violates the following Content Security Policy directive: “default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’”. Note that ‘connect-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

SecurityError: DOM Exception 18: 试图突破用户代理的安全策略。

This post 可能有助于理解内容安全政策。

【讨论】：

感谢您的回答。我试过了，但仍然没有运气。我用更新的 index.html 编辑了我的问题
您是否尝试过从您正在测试应用程序的设备/模拟器上的浏览器访问 API 的 URL - 只是为了确保可以从该设备/模拟器访问 API？远程检查 PhoneGap 应用程序并打开 JS 控制台是否显示任何有用的错误消息？
刚刚注意到您没有等待“deviceready”事件 - 可能值得修改代码来执行此操作并在 PhoneGap/Cordova 准备好后运行您的 XHR。
现在我收到一个错误“拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'self' data: gap:ssl.gstatic.com'unsafe-eval' ”。启用内联执行需要 'unsafe-inline' 关键字、哈希 ('sha256-P6OhJuaI6AUW6CM8dtsAeG1fSMdb6qAnuGVdihaqkzs=') 或随机数 ('nonce-...')。另请注意，'script-src' 是没有明确设置，所以 'default-src' 被用作后备。"
我看不到带有 deviceready 事件的 index.html，但看起来您在某处引入了一些内联 JS，需要将其删除或添加“不安全内联” default-src 所以它看起来像` ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; 风格-src 'self' 'unsafe-inline'; media-src *; connect-src google.com">`。您可能需要阅读 CSP 以确保选择您熟悉的安全设置content-security-policy.com

【解决方案2】：

在这里，我假设您使用的是 Phonegap 版本“cli-5.2.0”并在 Android 上遇到问题。要修复 404 问题，请在 config.xml 文件中添加以下行

<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

白名单插件需要与Phonegap“cli-5.2.0”一起使用才能成功向任何服务器发出请求。白名单插件链接https://github.com/apache/cordova-plugin-whitelist

【讨论】：