前端开发之 API 跨域请求代理插件 grunt-connect-proxy 配置 (基于0.1.10版)

Unless otherwise indicated, the text of documents in this site is available under the Creative Commons Attribution 3.0 Unported License, or any later version. Copyright 2009 - 2017 leopku.

Grunt-connect-proxy

最近的前端项目均基于 yoeman 搭建。yeoman 基于 grunt ,默认启动 9000 端口的 WEB 服务,开发起来非常方便。

不过,我们的后端项目监听在 3000 端口。在向后端请求时,出报跨域的错误。

幸好,找到了 grunt-connect-proxy 用于代理 API 跨域请求。

不过,网上好多资料看上去都是基于旧版本的。本文写作时 grunt-connect-proxy 最新版为 0.1.10,网上的配置要么太复杂要么不能正常工作。

正确的配置

新版的配置简单多了:

grunt.loadNpmTasks('grunt-connect-proxy'); /* 引入里Task */

connect: {
    options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
    },
    /* 在这里加入下面的内容 */
    proxies: [
        { context: '/api', host: 'localhost', port:3000 },
        { context: '/aapi', host: 'localhost', port:4000}, /* 还可加多个 */
    ],
    /* 加入结束 */
    livereload: {
        options: {
            middleware: function (connect) {
            return [
                /* 加上下面这行 */
                require('grunt-connect-proxy/lib/utils').proxyRequest,
                ...
            ];
        }
    }
}

/* 最后在 serve Task 里加上 configureProxies:server */
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    ...
    grunt.task.run([
        ...
        'configureProxies:server', /* 在 livereload 前加上 */
        'connect:livereload',
        ...
    ]);
});