AngularJS 应用程序运行在 Chrome 上给出 ERR_CONNECTION_REFUSED

Question

我正在使用以 phalcon 作为后端的 cg-angular 生成器创建 Angular 应用程序。我使用 configureProxies 连接后端和前端。我的 Gruntfile.js 是

Gruntfile.js

/*jslint node: true */
'use strict';

var pkg = require('./package.json');

var createFolderGlobs = function(fileTypePatterns) {
  fileTypePatterns = Array.isArray(fileTypePatterns) ? fileTypePatterns : [fileTypePatterns];
var ignore = ['node_modules','bower_components','dist','temp'];
var fs = require('fs');
return fs.readdirSync(process.cwd())
      .map(function(file){
        if (ignore.indexOf(file) !== -1 ||
            file.indexOf('.') === 0 ||
            !fs.lstatSync(file).isDirectory()) {
          return null;
        } else {
          return fileTypePatterns.map(function(pattern) {
            return file + '/**/' + pattern;
          });
        }
      })
      .filter(function(patterns){
        return patterns;
      })
      .concat(fileTypePatterns);
};

module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
connect: {
  proxies: [{
            context: ['/'],
            host: '0.0.0.0',
            port: 80,
            https: false,
            changeOrigin: true
        }],
  main: {
    options: {
      port: 9001,
      hostname: '0.0.0.0',
      directory: '.',
      livereload: 35730
    }
  },
  livereload: {
            options: {
                middleware: function(connect, options) {
                    if (!Array.isArray(options.base)) {
                        options.base = [options.base];
                    }
                    // Setup the proxy
                    var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
                    // Serve static files.
                    options.base.forEach(function(base) {
                        middlewares.push(connect.static(base));
                    });
                    // Make directory browse-able.
                    var directory = options.directory || options.base[options.base.length - 1];
                    middlewares.push(connect.directory(directory));
                    return middlewares;
                }
            }
        }
},
watch: {
  main: {
    options: {
        livereload: 35730,
        livereloadOnError: false,
        spawn: false
    },
    files: [createFolderGlobs(['*.js','*.less','*.html']),'!_SpecRunner.html','!.grunt'],
    tasks: [] //all the tasks are run dynamically during the watch event handler
  }
},
jshint: {
  main: {
    options: {
        jshintrc: '.jshintrc'
    },
    src: createFolderGlobs('*.js')
  }
},
clean: {
  before:{
    src:['dist','temp']
  },
  after: {
    src:['temp']
  }
},
less: {
  production: {
    options: {
    },
    files: {
      'temp/app.css': 'app.less'
    }
  }
},
ngtemplates: {
  main: {
    options: {
        module: pkg.name,
        htmlmin:'<%= htmlmin.main.options %>'
    },
    src: [createFolderGlobs('*.html'),'!index.html','!_SpecRunner.html'],
    dest: 'temp/templates.js'
  }
},
copy: {
  main: {
    files: [
      {src: ['img/**'], dest: 'dist/'},
      {src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/',filter:'isFile',expand:true},
      {src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/',filter:'isFile',expand:true}
      //{src: ['bower_components/angular-ui-utils/ui-utils-ieshiv.min.js'], dest: 'dist/'},
      //{src: ['bower_components/select2/*.png','bower_components/select2/*.gif'], dest:'dist/css/',flatten:true,expand:true},
      //{src: ['bower_components/angular-mocks/angular-mocks.js'], dest: 'dist/'}
    ]
  }
},
dom_munger:{
  read: {
    options: {
      read:[
        {selector:'script[data-concat!="false"]',attribute:'src',writeto:'appjs'},
        {selector:'link[rel="stylesheet"][data-concat!="false"]',attribute:'href',writeto:'appcss'}
      ]
    },
    src: 'index.html'
  },
  update: {
    options: {
      remove: ['script[data-remove!="false"]','link[data-remove!="false"]'],
      append: [
        {selector:'body',html:'<script src="app.full.min.js"></script>'},
        {selector:'head',html:'<link rel="stylesheet" href="app.full.min.css">'}
      ]
    },
    src:'index.html',
    dest: 'dist/index.html'
  }
},
cssmin: {
  main: {
    src:['temp/app.css','<%= dom_munger.data.appcss %>'],
    dest:'dist/app.full.min.css'
  }
},
concat: {
  main: {
    src: ['<%= dom_munger.data.appjs %>','<%= ngtemplates.main.dest %>'],
    dest: 'temp/app.full.js'
  }
},
ngAnnotate: {
  main: {
    src:'temp/app.full.js',
    dest: 'temp/app.full.js'
  }
},
uglify: {
  main: {
    src: 'temp/app.full.js',
    dest:'dist/app.full.min.js'
  }
},
htmlmin: {
  main: {
    options: {
      collapseBooleanAttributes: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    },
    files: {
      'dist/index.html': 'dist/index.html'
    }
  }
},
karma: {
  options: {
    frameworks: ['jasmine'],
    files: [  //this files data is also updated in the watch handler, if updated change there too
      '<%= dom_munger.data.appjs %>',
      'bower_components/angular-mocks/angular-mocks.js',
      createFolderGlobs('*-spec.js')
    ],
    logLevel:'ERROR',
    reporters:['mocha'],
    autoWatch: false, //watching is handled by grunt-contrib-watch
    singleRun: true
  },
  all_tests: {
    browsers: ['PhantomJS','Chrome','Firefox']
  },
  during_watch: {
    browsers: ['PhantomJS']
  },
}
});

grunt.registerTask('build',['jshint','clean:before','less','dom_munger','ngtemplates','cssmin','concat','ngAnnotate','uglify','copy','htmlmin','clean:after']);
grunt.registerTask('serve', ['dom_munger:read','jshint','configureProxies:server', 'connect:livereload', 'watch']);
grunt.registerTask('test',['dom_munger:read','karma:all_tests']);

grunt.event.on('watch', function(action, filepath) {
//https://github.com/gruntjs/grunt-contrib-watch/issues/156

var tasksToRun = [];

if (filepath.lastIndexOf('.js') !== -1 && filepath.lastIndexOf('.js') === filepath.length - 3) {

  //lint the changed js file
  grunt.config('jshint.main.src', filepath);
  tasksToRun.push('jshint');

  //find the appropriate unit test for the changed file
  var spec = filepath;
  if (filepath.lastIndexOf('-spec.js') === -1 || filepath.lastIndexOf('-spec.js') !== filepath.length - 8) {
    spec = filepath.substring(0,filepath.length - 3) + '-spec.js';
  }

  //if the spec exists then lets run it
  if (grunt.file.exists(spec)) {
    var files = [].concat(grunt.config('dom_munger.data.appjs'));
    files.push('bower_components/angular-mocks/angular-mocks.js');
    files.push(spec);
    grunt.config('karma.options.files', files);
    tasksToRun.push('karma:during_watch');
  }
}

//if index.html changed, we need to reread the <script> tags so our next run of karma
//will have the correct environment
if (filepath === 'index.html') {
  tasksToRun.push('dom_munger:read');
}

grunt.config('watch.main.tasks',tasksToRun);

});
};

当我运行 grunt server 时它会说

运行“configureProxies:server”(configureProxies) 任务 创建的代理： / 到 0.0.0.0:80

运行“connect:livereload”（连接）任务 开始在http://localhost:8000上连接网络服务器

当我在浏览器中路由到我的 php 后端时，它会显示我编码的 json 数据。在我的角度应用程序中有获取请求 ($http.get('url').success(function(data){log.console(data)});) 但我路由到 localhost:9001 它给出了错误

ERR_CONNECTION_REFUSED

我的 gruntfile 有什么问题吗？我该如何解决这个问题？。

Answer 1

经过一些研究和少量讨论，我可以解决问题。问题出在 grunt 文件中。即使我将连接选项设置为端口 9001，它也会在端口 8000 上运行，因为我得到了 chrome 错误所以我将 grunt 文件连接部分更改为这样。

connect: {
  proxies: [{
            context: ['/api'],
            host: '0.0.0.0',
            port: 80,
            https: false,
            changeOrigin: true
        }],
//In here I remove the main:{}
    options: {
      port: 9001,
      hostname: '0.0.0.0',
      directory: '.', 
      livereload: 35730
  },
  livereload: {
            options: {
                middleware: function(connect, options) {
                    if (!Array.isArray(options.base)) {
                        options.base = [options.base];
                    }
                    // Setup the proxy
                    var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
                    // Serve static files.
                    options.base.forEach(function(base) {
                        middlewares.push(connect.static(base));
                    });
                    // Make directory browse-able.
                    var directory = options.directory || options.base[options.base.length - 1];
                    middlewares.push(connect.directory(directory));
                    return middlewares;
                }
            }
        }
},

我也像这样更改服务器任务的加载顺序。并将更重要的任务放在开头，例如“configureProxies:server”和“connect:livereload”

grunt.registerTask('serve', ['configureProxies:server', 'connect:livereload','dom_munger:read','jshint', 'watch']);

这些更改对我有用，并且在我的浏览器中运行良好。