今天仔细看了一下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)
]
}
});
});
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…