我花了几个小时试图解决这个问题,但显然我有些缺失。
以下是有效的表格:
<form method="POST" action="http://localhost:8080/media" enctype="multipart/form-data">
<input type="text" name="id" />
<input type="file" name="media" />
<input type="submit" />
</form>
但是当我尝试用AJAX做这件事时它不起作用:
const formData = new FormData();
formData.append('id', 12345678);
formData.append('media', files[0]);
await axios.post('http://localhost:8080/media', formData);
我也试过在FormData
内传递表格,但无济于事。我试图用RxJS'ajax,fetch,axios和原生XHR做到这一点。但是在API方面,我总是得到Content-Length
2
这条消息:
Error: MultipartParser.end(): stream ended unexpectedly: state = START_BOUNDARY
。我显然遗漏了一些东西,我试过比较标题:
<form />
浏览器:
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7
Cache-Control:no-cache
Connection:keep-alive
Content-Length:59016
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryBU4XYm39EghQ0yO7
Cookie:_csrf=XJIV1TDkMdubOUEgpIi8WncT; preppy_access_token=s%3A60634aaa826a921adbba95d21c59ae77b90cd60bfc9508462a924e7790f4baa9cd031e7e0f87bf0e0547295df534bf85d2db22b6e700b1228ecb3b9c4e56ba2e.F7N3bA%2BKnIaVbr%2FSpVJRaLzh4MEySJQes%2BLFr32vp%2Fc; io=aJX7SD7Frpd684XrAABU
Host:localhost:8080
Origin:http://localhost
Pragma:no-cache
Referer:http://localhost/preppy-ui/test.html
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36
<form />
API:
{ host: 'localhost:8080',
connection: 'keep-alive',
'content-length': '59016',
pragma: 'no-cache',
'cache-control': 'no-cache',
origin: 'http://localhost',
'upgrade-insecure-requests': '1',
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryBU4XYm39EghQ0yO7',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
referer: 'http://localhost/preppy-ui/test.html',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7',
cookie: '_csrf=XJIV1TDkMdubOUEgpIi8WncT; preppy_access_token=s%3A60634aaa826a921adbba95d21c59ae77b90cd60bfc9508462a924e7790f4baa9cd031e7e0f87bf0e0547295df534bf85d2db22b6e700b1228ecb3b9c4e56ba2e.F7N3bA%2BKnIaVbr%2FSpVJRaLzh4MEySJQes%2BLFr32vp%2Fc; io=aJX7SD7Frpd684XrAABU' }
AJAX浏览器:
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7
Cache-Control:no-cache
Connection:keep-alive
Content-Length:59006
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylJADAgo5h7Ub8ee3
Cookie:_csrf=XJIV1TDkMdubOUEgpIi8WncT; preppy_access_token=s%3A60634aaa826a921adbba95d21c59ae77b90cd60bfc9508462a924e7790f4baa9cd031e7e0f87bf0e0547295df534bf85d2db22b6e700b1228ecb3b9c4e56ba2e.F7N3bA%2BKnIaVbr%2FSpVJRaLzh4MEySJQes%2BLFr32vp%2Fc; io=dSnYelriFIPJxVreAABT
Host:localhost:3001
Origin:http://localhost:3001
Pragma:no-cache
Referer:http://localhost:3001/app/post/new
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36
X-CSRF-Token:jSu6shgA-CCkjcsuWdPK-0gdjDzctqx41FgM
AJAX API:
{ 'x-forwarded-host': 'localhost:3001',
'x-forwarded-proto': 'http',
'x-forwarded-port': '3001',
'x-forwarded-for': '::1',
cookie: '_csrf=XJIV1TDkMdubOUEgpIi8WncT; preppy_access_token=s%3A60634aaa826a921adbba95d21c59ae77b90cd60bfc9508462a924e7790f4baa9cd031e7e0f87bf0e0547295df534bf85d2db22b6e700b1228ecb3b9c4e56ba2e.F7N3bA%2BKnIaVbr%2FSpVJRaLzh4MEySJQes%2BLFr32vp%2Fc; io=aJX7SD7Frpd684XrAABU',
'accept-language': 'en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7',
'accept-encoding': 'gzip, deflate, br',
referer: 'http://localhost:3001/app/post/new',
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundarymjZP5I8gsz0WvbF6',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36',
'x-csrf-token': 'VUcg2Nou-ArZXX9YKqzn8WUUdiocYaXaxDCQ',
origin: 'http://localhost:3001',
accept: 'application/json, text/plain, */*',
'cache-control': 'no-cache',
pragma: 'no-cache',
connection: 'close',
'content-length': '2',
'accept-charset': 'utf-8',
host: 'localhost:8080' }
答案 0 :(得分:0)
原来问题是由于我在前端代理请求。 <form />
方法直接发布到API,而AJAX发布到代理端点。
该解决方案发布在此处: https://github.com/villadora/express-http-proxy/issues/127