Rails Angular grunt 代理

Question

我在这里遇到了一些情况，因为我不完全理解它是如何工作的。我有一个 rails 后端， rails 服务器运行在端口上3000，我在同一项目文件夹中有一个 angular-app。 This is the application and the Angular-app is inside the ngapp/ 目录。

我想做的是使用 rails 中的 api 并使用 AngularJS 呈现应用程序。并使用 grunt 而不是 sprockets 来服务器静态资产。

我面临的问题是如何将请求从 localhost:9000/api/v1/articles 代理到 localhost:3000/api/v1/articles 。当我尝试发送请求 ajax 请求时，它总是在 localhost:9000/api/v1/articles.

上显示 404

我不明白我在 Gruntfile.js 中遗漏了什么，因为 grunt 或 rails 都没有显示任何错误。

'use strict';
module.exports = function (grunt) {
  grunt.initConfig({
    jshint: {
      src: ['app/**/*.js'],
      options: {
        eqeqeq: true,
        curly: true,
        laxcomma: true
      }
    },
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729,
        base: './'
      },
      proxies: [
        {
          context: '/api/v1',
          host: 'localhost',
          port: 3000,
          changeOrigin: true
        }
      ],
      livereload: {
        options: {
          middleware: function(connect, options) {
            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }

            // Setup the proxy
            var middlewares = [];

            // 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: {
      options: {
        livereload: '<%= connect.options.livereload %>',
        dateFormat: function(time) {
          grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
          grunt.log.writeln('Waiting for more changes...');
        }
      },
      files: ['Gruntfile.js', 'app/**/*.js', 'app/**/*.css', 'bower_components/**/*.css'],
      tasks: ['jshint']
    }
  });


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

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-connect-proxy');
  grunt.loadNpmTasks('grunt-contrib-connect');
};

Answer 1

我根据https://github.com/drewzboto/grunt-connect-proxy

看出区别

var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

Rails Angular grunt 代理

Rails Angular grunt-proxy

javascript

ruby-on-rails

angularjs

gruntjs