Question

我正在使用Rails作为我的API，前面是AngularJS，我遇到了一些问题，让livereload / grunt connect proxy正常工作。

以下是我的gruntfile的片段：

connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
      proxies: [
        {
          context: '/api',
          host: 'localhost',
          port: 3000
        }
      ],
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ],
          middleware: function (connect, options) {
            var middlewares = [];
            var directory = options.directory || options.base[options.base.length - 1];

            // enable Angular's HTML5 mode
            middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }
            options.base.forEach(function(base) {
              // Serve static files.
              middlewares.push(connect.static(base));
            });

            // Make directory browse-able.
            middlewares.push(connect.directory(directory));

            return middlewares;
          }
        }
      },
      test: {
        options: {
          port: 9001,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ]
        }
      },
      dist: {
        options: {
          base: '<%= yeoman.dist %>'
        }
      }
    }

如果我'笨拙建立'一切正常 - 关闭localhost:3000

但是，如果我'唠叨服务'，它会在127.0.0.1:9000打开一个窗口，我的所有API调用都会获得404。

同样在服务之下它会从CSS文件中修改我的背景图像我收到此警告：

Resource interpreted as Image but transferred with MIME type text/html: "http://127.0.0.1:9000/images/RBP_BG.jpg"

我之前没有这样做过 - 所以很可能我做错了。

Answer 1

我不喜欢connect.livereload.middleware配置中的太多代码这一切都是必要的吗？

在我的一些项目中查看this commit - chore(yeoman-gruntfile-update): configured grunt-connect-proxy。

后端是Django
ports：frontend：9000，backend：8000
generator-angular在v.0.6.0中
我的connect.livereload.middleware配置基于：https://stackoverflow.com/a/19403176/1432478

Answer 2

这是一篇旧帖子，但请确保您在livereload之前调用configureProxies实际初始化grunt服务任务中的代理。

grunt.task.run([
  'clean:server',
  'bower-install',
  'concurrent:server',
  'autoprefixer',
  'configureProxies',
  'connect:livereload',
  'watch'
]);

之后应该可以正常工作。

Answer 3

我遇到了类似的问题，但是我没有使用过自己的问题。

我的解决方案是添加任务'configureProxies'。

这是我的任务：

grunt.registerTask（'serve'，['connect：livereload'，'configureProxies'， 'open：server'，'watch']）;

和'connect：livereload'，'configureProxies' - 经过我的测试，这两项任务的顺序不会影响结果。

github grunt-connect-proxy

Grunt Livereload + Grunt Connect Proxy

3 个答案: