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

Question

我需要从运行在Chrome上的Web应用程序发送多部分表单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。 如果没有，您将需要在服务器端发出此请求。

这全都归因于同源起源策略 ，这是所有现代浏览器现在都实施的安全策略。

Answer 2

为什么将POST的目标设置为iFrame可以工作，但是ajax不能呢？

因为Ajax会让触发请求的站点（Mallory的站点）上的Alice浏览器中运行的JavaScript访问Bob站点的响应（当只有Alice和Bob可以访问私有数据时，它可能会将私有数据泄漏给Mallory）。

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

有没有一种方法可以解决此问题，从而能够构建自己的多部分有效载荷？

几个 。 主要的是：

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