javascript - gulp的proxy代理无法将数据传输到服务端，怎么办？？

问题描述

问 题

使用gulp的gulp-connect和gulp-connect-proxy配置了代理服务，传输到服务端解决了跨域，但是服务端接收的参数为空，返回参数错误，相同的jquery的ajax请求在使用nginx的反向代理服务数据传输到服务端能否正常接收数据并处理，以下是相关代码，麻烦大神能够帮忙解决以下，先谢谢了。（由于保密关系服务端地址就不贴上了，其他代码都在这里了）

补充：

1. 本地向服务端传送的数据是text格式，服务端接收字符串自己转换，发现被gulp-connect-proxy代理后没有向服务端传输http请求的body,只是传输了url，所以导致无法传输数据，解决办法是将数据拼接到url后面，但是这导致了补充的第二点。

2. url后面拼接数据虽然实现了向服务端传输数据，但是我有一个请求传输的是json字符串，结果在代理过程中被截取了，导致只传输一半数据，构不成json导致传输失败，希望有大神能告诉一下原因；

gulp相关配置：

var host = {
    // 默认开发输出目录
    path: 'www/',
    // 默认源目录
    devUrl:"src/",
    // 设置服务端口
    port: 8080,
    html: 'index.html',
    proxy:'/proxy'
};
//使用connect启动一个Web服务器
gulp.task('connect', function() {
    connect.server({
        root: host.path,
        port: host.port,
        livereload: true,
        middleware: function (connect, opt) {
            opt.route = host.proxy;
            opt.changeOrigin = true;
            opt.ws = true;
            // opt.origin = 'localhost:9090';
            var proxy = new Proxy(opt);
            return [proxy];
        }
    });
});

页面请求参数：

// nginx端口配置
// var url = "/msgget/";
// gulp端口配置
var  url = "/proxy/域名:端口号/";
var getmsg= "token=310239ifjsie1&&mxx=13131";
$.ajax({
    url: url+"getCart",
    type: 'post',
    dataType: 'text',
    data: getmsg,
}).done(function(res){
    res = JSON.parse(res);
    //使用nginx配置数据正常获取，使用gulp配置解决了跨域但是数据没有传输到服务端
});

nginx配置：

location /msgget/{
    proxy_set_header Host $host;
    proxy_set_header X-Real-Ip $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_pass  http://域名:端口号/;
}

解决方案

今天仔细看了一下gulp-conncet-proxy的源码,发现它只支持在url上面拼接数据，而不支持jquery的ajax函数的data参数

在gulp-connect-proxy的主文件index.js的第9行有下面这一句话

var options = url.parse('http://' + localRequest.url.slice(1));

通过测试，如果使用jquery.ajax的data参数虽然请求发送到服务器但是数据并没有传输过去，将数据序列化后拼接到url后面则可以接收到服务端返回的正确数据。

另外在补充2中字符串被截取是jquery做的，我仔细检查了自己的数据，发现截取位置是 # 位置，应该是jquery认为页面是含有hash值的标识#而进行了截取。接下来验证gulp-connect-proxy是否只能进行get代理（无论get还是post请求都转换为get请求）

经过服务端的配合验证结果如下：

gulp-connect-proxy插件代理流程：
1. 页面发送请求，数据必须放在url中
2. 插件收到请求截取到url中真正的请求（包含数据字符串）转发到目标地址

重点：gulp-connect-proxy将所有的请求都转换为get请求处理，所以当目标地址不允许get请求时会收到405错误。

最新解决方案：由于gulp-connect-proxy只能代理get请求，经过查找发现proxy-middleware能够解决post请求，而且写法与nginx配置是兼容的，这样在本地使用gulp，生产环境用nginx完美兼容

var connect = require('gulp-connect'),
    url     = require('url'),
    proxy   = require('proxy-middleware');
    
var proxyOptions = url.parse('http://服务端地址');
    proxyOptions.route = '/api';
....
....
gulp.task('connect', function() {
    connect.server({
        root: host.path,
        port: host.port,
        livereload: true,
        middleware: function (connect, opt) {
            return [
                proxy(proxyOptions)
            ]
        }
    });
});

这篇关于javascript - gulp的proxy代理无法将数据传输到服务端，怎么办？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！