使用grunt的请求代理只适用于HTTP (而不是HTTPS)

Question

现在，我们的数据源在manifest.json中进行了如下配置(这会导致CORS错误)：

"dataSources": {
    "contractsRemote": {
        "uri": "https://myCompany:8443/sap/opu/odata/SAP/Z_TEST_SRV/",
        "type": "OData",

    },
    "userInfoRemote": {
        "uri": "https://myCompany:8443/sap/bc/ui2/start_up",
        "type": "JSON"
    }
}

如果我们部署应用程序(通过/UI5/UI5_REPOSITORY_LOAD上传)，我们必须将URI更改为

"dataSources": {
    "contractsRemote": {
        "uri": "/sap/opu/odata/SAP/Z_TEST_SRV/",
        "type": "OData",

    },
    "userInfoRemote": {
        "uri": "/sap/bc/ui2/start_up",
        "type": "JSON"
    }
}

如果我们只在本地dev环境中使用相对URI (来自第二个片段)，就会容易得多。因此，为了解决CORS和URI问题，我希望设置一个普通任务(警告，我以前从未这样做过)，它代理对https://myCompany:8443/path的相关请求。

我以SAP中的Gruntfile.js为例，为代理添加了一些行，它可以工作，但只能通过HTTP。如果我将代理端口更改为8443，并将https设置为true，则会得到以下错误

> Proxy error: ECONNRESET

这是我的Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        dir: {
            webapp: 'webapp',
            dist: 'dist',
            bower_components: 'bower_components'
        },
        connect: {
            options: {
                port: 8000,
                base: 'public',
                hostname: 'localhost',
                middleware: function(connect, options, defaultMiddleware) {
                    var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
                    return [
                        proxy
                    ].concat(defaultMiddleware);
                }
            },
            proxies: [{
                context: '/sap',
                host: 'myCompany',
                port: 8443,
                https: true
            }],
            src: {},
            dist: {}
        },
        openui5_connect: {
            options: {
                resources: [
                    '<%= dir.bower_components %>/openui5-sap.ui.core/resources',
                    '<%= dir.bower_components %>/openui5-sap.m/resources',
                    '<%= dir.bower_components %>/openui5-themelib_sap_bluecrystal/resources'
                ]
            },
            src: {
                options: {
                    appresources: '<%= dir.webapp %>'
                }
            },
            dist: {
                options: {
                    appresources: '<%= dir.dist %>'
                }
            }
        },
        openui5_preload: {
            component: {
                options: {
                    resources: {
                        cwd: '<%= dir.webapp %>',
                        prefix: 'todo'
                    },
                    dest: '<%= dir.dist %>'
                },
                components: true
            }
        },
        clean: {
            dist: '<%= dir.dist %>/'
        },
        copy: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= dir.webapp %>',
                    src: [
                        '**',
                        '!test/**'
                    ],
                    dest: '<%= dir.dist %>'
                }]
            }
        },
        eslint: {
            webapp: ['<%= dir.webapp %>']
        }
    });

    grunt.loadNpmTasks('grunt-connect-proxy');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-openui5');
    grunt.loadNpmTasks('grunt-eslint');

    grunt.registerTask('serve', function(target) {
        grunt.task.run([
            'configureProxies',
            'openui5_connect:' + (target || 'src') + ':keepalive'
        ]);
    });
    grunt.registerTask('lint', ['eslint']);
    grunt.registerTask('build', ['openui5_preload', 'copy']);
    grunt.registerTask('default', [
        //'lint',
        'clean',
        'build',
        'serve:dist'
    ]);
};

Answer 1

我终于让它开始工作了。

首先，本地主机也必须通过https来访问https API。其次，代理需要正确的协议(https:)，但同时必须将https设置为false。我想是有原因的。

connect: {
    options: {
        base: 'public',
        port: '443',
        hostname: 'localhost',
        protocol: 'https',
        open: true,
        livereload: true,
        middleware: function (connect, options, defaultMiddleware) {
            var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
            return [
                proxy
            ].concat(defaultMiddleware);
        }
    },
    proxies: [
        {
            context: '/sap',
            host: 'mySapHost',
            port: '443',
            https: false,
            protocol: 'https:'
        }
    ],
},

Answer 2

Probably you’re already using grunt to serve your local frontend code. Everything is fine, but if you’re developing your backend with something different than JavaScript (Being a Java developer I heard that might happen), you will have problems accessing this backend while running grunt server.

有了咕噜连接代理，就有了一个咕噜模块来帮助你解决问题。它基本上是将与给定URL匹配的请求委托给您选择的另一个后端。不幸的是，如果您不知道连接中间件的概念，我发现很难配置。

基本上，您只需要在Gruntfile.js文件中添加两样东西：

首先，将连接服务器配置添加到grunt.initConfig内部的配置JSON中。这个示例将所有请求委托给http://localhost:8000/services给http://localhost:8090/services -请记住grunt服务器运行在端口8000上，后端运行在端口8090上：