Rails Angular grunt-proxy

Question

我在这里有点情况，因为我不完全理解这是如何工作的。我有一个 rails 后端，rails 服务器在端口 3000 上运行，并且我在同一个项目中有一个 angular-app-文件夹 。 This 是应用程序，Angular-app 位于 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];