在Phonegap Build之后,Axios无法在Android上运行

时间:2017-09-04 02:23:49

标签: javascript android vue.js axios phonegap

我的Phonegap .apk在我们的网站上构建问题后出现了问题,我的问题是axios无法正常工作,但在我的Desktop Phonegap App中工作正常。我不知道我遇到的问题是什么,这是因为我的axios

技术:  AxiosVueJSPhonegap

我的index.js看起来像是:



Vue.directive('focus', {
    inserted: function(el) {
        return el.focus();
    }
});

var apiURL = 'http://stishs-grade-and-progress-report-monitoring-system.cf/',
    tokenString = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';

var Authentication = Vue.component('sti-main', {
    data() {
        return {
            username: '',
            password: '',
            error: {
                flag: false,
                message: ''
            }
        }
    },
    template: `
        <main>
            <form class="sti-form-auth" v-on:submit.prevent="signInProceed(username, password)">
            <div class="sti-logo">
            <img src="img/sti-logo-250.png" alt="STI Grading and Progress Report Monitoring System Logo">
            </div>
            <h1 class="sti-form-title">STI Grading and Progress Report Monitoring System</h1>
            <div class="sti-addon sti-form-control">
            <input type="text" class="sti-block" placeholder="Username" v-on:keydown="hideNotif" v-model.trim="username" v-focus ref="Username">
            <i class="ion ion-android-person"></i>
            </div>
            <div class="sti-addon sti-form-control">
            <input type="password" class="sti-block" placeholder="Password" v-on:keydown="hideNotif" v-model.trim="password" ref="Password">
            <i class="ion ion-android-lock"></i>
            </div>
            <div class="sti-form-control">
            <button class="sti-block sti-button-blue">Sign in</button>
            </div>
            </form>
            <div v-show="error.flag" class="sti-error-message">
            <p class="sti-error-title"><i class="ion ion-alert-circled sti-right-5"></i>Error Found!</p>
            <p>{{ error.message }}</p>
            </div>
            <div class="sti-footer-auth">
            <p class="sti-center">Copyright &copy; 2017 STI Grading and Progress Report Monitoring System. All Rights Reserved.</p>
            </div>
        </main>
    `,
    created: function() {
        var authToken = localStorage.getItem('stishTokenAPI')
        if(authToken != null && authToken.split('&')[2] == 3) {
            var authData = `method=check&0=${authToken.split('&')[0]}&1=${authToken.split('&')[1]}`
            return axios.post(`${apiURL}sti-api/authentication.php`, authData).then(function(response) {
                var authenticated = response.data
                if(authenticated.count == 1 && authenticated.type_id == 3) {
                    return window.location.href = './student.html'
                }
                return window.location.href = './index.html'
            });
        }
    },
    methods: {
        hideNotif: function() {
            return this.error.flag ? this.error.flag = false : true
        },
        generateToken: function(generateToken = '') {
            for(var i = 0; i < tokenString.length; i++) {
                generateToken += tokenString[Math.floor(Math.random() * (tokenString.length - 1)) + 1];
            }
            return generateToken;
        },
        signInProceed: function(user, pass) {
            var vm = this
            if(user == '' || pass == '') {
                var errorType = user == '' ? 'Username' : 'Password'
                vm.$refs[errorType].focus()
                vm.error.message = `- Missing credential. ${errorType} is required!.`
                vm.error.flag = true
                return
            }
            var authToken = vm.generateToken()
            var parameter = `method=auth&username=${vm.username}&password=${vm.password}&token=${authToken}`
            return axios.post(`${apiURL}sti-api/authentication.php`, parameter).then(function(response) {
                var account = response.data
                if(account.success && account.details.type_id == 3) {
                    localStorage.setItem('stishTokenAPI', `${authToken}&${account.details.account_id}&${account.details.type_id}`)
                    return window.location.href = './student.html'
                }
                vm.error.message = `- ${account.message}`
                return vm.error.flag = true
            });
        }
    }
});

new Vue({
    el: '#auth'
});
&#13;
&#13;
&#13;

这是我的index.html

&#13;
&#13;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>STI Grading and Progress Report Monitoring System</title>
        <link rel=stylesheet href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,500,600">
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <main id="auth">
            <sti-main></sti-main>
        </main>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/axios.min.js"></script>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
&#13;
&#13;
&#13;

这是我的config.xml

&#13;
&#13;
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>sti-mobile-app</name>
    <description>
        A blank PhoneGap app.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>
    <content src="index.html" />
    <allow-navigation href="*" />
    <allow-intent href="*" />
    <access origin="*" />
</widget>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

对于Android / PhoneGap应用,您必须告诉操作系统您要访问的域。也许那是怎么回事?

这是一个与之相关的cordova插件:http://npmjs.com/package/cordova-plugin-whitelist