Grunt Connect代理：404未找到

Question

我正在使用"^0.2.0"的grunt-connect-proxy来代理我的angularjs应用程序中的api。这个项目是用yeoman angular-generator开始的。

我按照这里的说明进行操作，但在使用代理时出现以下错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:9000/api/users 

我的代理配置：

 connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  proxies: [{
    context: '/api', // the context of the data service
    host: 'localhost', // wherever the data service is running
    port: 8080, // the port that the data service is running on
    https: false,
    xforward: false
  }],

我的中间件：

livereload: {
    options: {
      open: true,
      base: '',
      middleware: function (connect, options) {
        var middlewares = [];

        middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);

        middlewares.push(connect.static('.tmp'));
        middlewares.push(connect.static('test'));
        middlewares.push(connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ));
        middlewares.push(connect.static(appConfig.app));

        return middlewares;
      }
    }
  },

我的服务器任务

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

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

编辑 目前通过Postman访问localhost:8080/users会返回403，因此API正在运行。

- user3147424

---

你尝试过在选项之前使用 server: {} 吗？ - Muhammad Abid

看一下这个问题..也许会有帮助 https://stackoverflow.com/questions/34321143/adding-grunt-connect-proxy-to-generator-angular-gruntfile-js - aprok

Answer 1

虽然没有直接回答你的问题，但是提供了一个解决方案（因为没有其他人回答）...你尝试过npm模块connect-modrewrite吗？

它可以完美地实现你想要做的事情。

- danday74

Answer 2

我曾经遇到过同样的问题，我通过以下方式解决了它，并且它对我有效。请查看我的代码：

connect: { 
            server: { 
                options: { 
                    keepalive: true, 
                    port: 8001, 
                    protocol: 'http', 
                    hostname: '*', 
                    directory: 'dist', 
                    open: { 
                        target: 'http://localhost:8001/myDemo.html', 

                    },
                        middleware: function(connect, options, middlewares) {

                                middlewares.unshift(function(req, res, next) {
                                    res.setHeader('Access-Control-Allow-Credentials', true);
                                    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                                    res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
                                    **if (req.method.toUpperCase() == 'POST') req.method='GET';**
                                    return next();
                                });

                                return middlewares;
                        }

                } 
            } 
        },

看到星号标记的那一行，即 if (req.method.toUpperCase() == 'POST') req.method='GET'; 我用了这个技巧，它对我很有用。这篇文章也帮助了我 https://github.com/gruntjs/grunt-contrib-connect#middleware

- user1989488