gulp的proxy代理无法将数据传输到服务端,怎么办??
使用gulp的gulp-connect和gulp-connect-proxy配置了代理服务,传输到服务端解决了跨域,但是服务端接收的参数为空,返回参数错误,相同的jquery的ajax请求在使用nginx的反向代理服务数据传输到服务端能否正常接收数据并处理,以下是相关代码,麻烦大神能够帮忙解决以下,先谢谢了。(由于保密关系服务端地址就不贴上了,其他代码都在这里了)
补充:
本地向服务端传送的数据是text格式,服务端接收字符串自己转换,发现被gulp-connect-proxy代理后没有向服务端传输http请求的body,只是传输了url,所以导致无法传输数据,解决办法是将数据拼接到url后面,但是这导致了补充的第二点。
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://域名:端口号/;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
1楼回答的没用
该答案已被忽略,原因:不符合答题规范,内容不是答案,可用评论、投票替代
今天仔细看了一下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)
]
}
});
});