Question

我花了几个小时试图解决这个问题，但显然我有些缺失。

以下是有效的表格：

<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' }

Answer 1

原来问题是由于我在前端代理请求。 <form />方法直接发布到API，而AJAX发布到代理端点。

该解决方案发布在此处： https://github.com/villadora/express-http-proxy/issues/127

AJAX multipart / data-form不起作用，但是常规<form>有效

1 个答案: