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"
    }
}

如果我们在本地开发环境中使用相对URI（来自第二个片段）会更容易。因此，为了解决CORS和URI问题，我想设置一个grunt任务（警告，我以前从未这样做过）代理相对https://myCompany:8443/path的请求。

我从一些SAP github repos中获取了示例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服务localhost才能访问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.

使用grunt-connect-proxy存在一个帮助你的grunt模块。它基本上将与给定URL匹配的请求委托给您选择的不同后端。不幸的是，如果您不了解连接中间件概念，我发现它很难配置。

基本上你只需要在Gruntfile.js文件中添加两个东西：

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

使用grunt的请求的代理仅适用于HTTP（而不是HTTPS）

2 个答案: