使用科爾多瓦白名單的Ionic $ http錯誤404

Question

我的應用程序，一個帶$ hhtp.get請求的簡單離子應用程序，在我的Android手機上的PhoneGap Build之後無法使用。當我調試它給我一個404錯誤。 當我使用ionic serve -p $ PORT命令在我的筆記本電腦上運行它時，它給了我一個CORS錯誤。 如果我激活CORS插件，它可以在筆記本電腦上的Chrome中運行。 我在c9（雲9）上編碼並在Adobe PhoneGap上構建。

我的要求

.controller('teamCtrl', function($scope, $http, $window) { 
    $http.get("http://google.com") 
    .success(function(response) { 
     $scope.categories = getArray(response); 
     var b =1; 
    }) 
    .error(function(response) { 
     $window.alert("d'oh!"); 
    }); 
}) 

我在index.html的CSP：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 

config.xml文件：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<widget id="com.ionicframework.openorganix919048" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>OpenOrganix</name> 
    <description> 
     An Ionic Framework and Cordova project. 
    </description> 
    <author email="hi@ionicframework" href="http://ionicframework.com/"> 
     Ionic Framework Team 
    </author> 
    <content src="index.html"/> 
    <access origin="*" /> 
    <allow-navigation href="http://*/*" /> 
    <allow-intent href="http://*/*"/> 
    <preference name="webviewbounce" value="false"/> 
    <preference name="UIWebViewBounce" value="false"/> 
    <preference name="DisallowOverscroll" value="true"/> 
    <preference name="android-minSdkVersion" value="16"/> 
    <preference name="BackupWebStorage" value="none"/> 
    <preference name="SplashScreen" value="screen"/> 
    <preference name="SplashScreenDelay" value="3000"/> 
    <feature name="StatusBar"> 
    <param name="ios-package" value="CDVStatusBar" onload="true"/> 
    </feature> 
    <platform name="android"> 
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/> 
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/> 
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/> 
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/> 
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/> 
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/> 
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/> 
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/> 
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/> 
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/> 
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/> 
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/> 
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/> 
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/> 
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/> 
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/> 
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/> 
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/> 
    </platform> 
</widget> 

Cordo v白名單插件已安裝。

我使用攔截器添加以下標題嘗試：

<Access-Control-Allow-Origin : *> 

我讀過到處是科爾多瓦白名單應該採取的這雖然照顧......請幫助我！

Answer 1

這個解決方案對我來說只適用於移動設備，而不是網絡瀏覽器。請檢查您正在使用的移動設備作爲

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> 

創建一個按鈕來測試它爲

<button class="button button-bar button-balanced" ng-click="whitelist()">Test it</button> 

，並在控制器中的最後一步的代碼都會被它
更新HTML代碼

$scope.whitelist = function(){ 

    console.log('method called'); 

    $http.get("https://www.google.co.in/").then(function(data){ 
     console.log(data); 
     $scope.categories = data.status; 
     console.log($scope.categories); 
    }, function(error){ 
     console.log(error); 
     $window.alert("d' oh!"); 
    }); 

    } 

在你的config.xml文件中的代碼必須是這樣的

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<widget id="com.ionicframework.rangeslider745642" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>rangeslider</name> 
    <description> 
     An Ionic Framework and Cordova project. 
    </description> 
    <author email="hi@ionicframework" href="http://ionicframework.com/"> 
     Ionic Framework Team 
    </author> 
    <content src="index.html"/> 
    <access origin="*"/> 
    <preference name="webviewbounce" value="false"/> 
    <preference name="UIWebViewBounce" value="false"/> 
    <preference name="DisallowOverscroll" value="true"/> 
    <preference name="android-minSdkVersion" value="16"/> 
    <preference name="BackupWebStorage" value="none"/> 
    <preference name="SplashScreen" value="screen"/> 
    <preference name="SplashScreenDelay" value="3000"/> 
    <feature name="StatusBar"> 
    <param name="ios-package" value="CDVStatusBar" onload="true"/> 
    </feature> 
    <platform name="android"> 
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/> 
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/> 
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/> 
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/> 
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/> 
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/> 
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/> 
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/> 
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/> 
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/> 
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/> 
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/> 
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/> 
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/> 
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/> 
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/> 
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/> 
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/> 
    </platform> 
</widget> 

Answer 2

解決！問題在於，通過離子Cli構建可以將所有內容連接在一起而不會出現問題。但是，adobe build.phonegap.com構建不會。無論插件是否已存在於項目中，您都必須在配置文件中指定插件。所以到config.xml文件中加入：<gap:plugin name="cordova-plugin-whitelist" source="npm" />，當然不要忘了添加xmlns:gap="http://phonegap.com/ns/1.0"