Question

我需要从Chrome上运行的网络应用程序发送多部分表单POST请求。这适用于以下代码：

<form method="post" action="http://localhost:999/some/path" target="iframeId" id="mainForm">
...
</form>
<iframe id="iframeId" name="iframeId" width="100%"></iframe>

我想手动创建多部分请求有效负载，因为要提交的文件需要先加密。

var boundary = "---------------------------7da24f2e50046";
var body = '--' + boundary + '\r\n'
     + 'Content-Disposition: form-data; name="file";'
     + 'filename="temp.bin"\r\n'
     + 'Content-type: application/octet-stream\r\n\r\n'
     + body + '\r\n'
     + boundary + '--';

$.ajax({
    contentType: "multipart/form-data",
    data: body,
    type: "POST",
    url: "http://localhost:999/some/path",
    success: function (data, status) {
        alert('done');
    }
});

当我运行此代码时，我收到以下错误：

XMLHttpRequest无法加载localhost：999 / some / path。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许来源'file：//'访问。

为什么将POST的目标设置为iFrame有效，但ajax不会？有没有办法解决这个问题，能够构建我自己的多部分有效负载？

Answer 1

要发出跨域AJAX请求，接收域必须接受CORS请求，或者您需要以JSONP格式发送。当您尝试发送多部分表单数据时，后者并不适合您。

您唯一的选择是检查接收域是否确实接受CORS。如果不是，您将需要在服务器端发出此请求。

这完全归功于Same Origin Policy这是所有现代浏览器现在都实施的安全策略。

Answer 2

为什么将POST的目标设置为iFrame有效，但ajax不会？

因为Ajax会让位于Alice浏览器的网站（Mallory的网站）上运行的JavaScript运行请求访问Bob网站的响应（当Alice和Bob应该访问它时，可能会泄露私有数据到Mallory）。

iframe有其他机制阻止JS访问数据。

有没有办法解决这个问题，能够构建我自己的多部分有效负载？

Several。主要是：

CORS
JSONP（不适合POST请求）
让JS向同一服务器发出请求，然后使用服务器端代码

使用JQuery.ajax在另一个域上发布

2 个答案: