javascript - setRequestHeader Content-Type导致POST请求变成OPTIONS

Question

如果您不知道答案，请竖起大拇指。

function local_upload_photo(form_data)
{    
    var boundary    = "-----------------------------" + (new Date).getTime();
    var CRLF        = "\r\n";
    var parts       = [];

    // form text fields
    for(var i in form_data)
    {
        if(form_data.hasOwnProperty(i))
        {
            var part = 'Content-Disposition: form-data; name="' + i + '"' + CRLF + CRLF + form_data[i] + CRLF;

            parts.push(part);
        }
    }

    var data    = base64_decode('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQImWNgYGAAAAAEAAGjChXjAAAAAElFTkSuQmCC');

    // photo file
    var part = 'Content-Disposition: form-data; name="file1"; filename="me.gif"' + CRLF + "Content-Type: image/gif" + CRLF + CRLF + data + CRLF;

    //console.log( base64_encode(element.files[0].getAsBinary()) );

    parts.push(part);

    // prepare the query
    var request = 'Content-Type: multipart/form-data; boundary=' + boundary + CRLF + CRLF; 
        // content-length is missing    
        request += "--" + boundary + CRLF;
        request += parts.join("--" + boundary + CRLF);
        request += "--" + boundary + "--" + CRLF;

    // send the data
    var xhr      = new XMLHttpRequest();

    xhr.open('post', 'http://upload.guy.com/storage.php');

    xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
    xhr.setRequestHeader('Content-Length', String(request.length));


    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
           console.log(xhr.responseText);
        }

    };

    // finally send the request as binary data
    xhr.sendAsBinary(request);
}

故事:用户来到 guy.lt 并使用 javascript: 运行 URL 栏中提供的 JS 代码。这应该上传一个文件，您在 base64 中看到的文件到 storage.guy.lt。然而，同源政策在这里开始并且不允许它。一种解决方案是简单地要求人们在 storage.guy.lt 上做同样的事情，或者只是移动上传 guy.lt，但是，客户不同意。

所以在搜索了一段时间后，我遇到了网站 Facebook。现在，如果您将监控 FB 上传照片的过程，您会注意到用户从 facebook.com 执行此操作，但是 POST 请求(以及使用 XMLHttpRequest，AFAIK)被发送到 uploads.facebook.com。他们是怎么做到的？

在一个地方，他们加载 iframe http://static.ak.facebook.com/common/redirectiframe.html 内容:

if (navigator && navigator.userAgent && !(parseInt((/Gecko\/([0-9]+)/.exec(navigator.userAgent) || []).pop()) <= 20060508)) {
        //document.domain='facebook.com';
    }

我曾尝试在我的案例中做类似的事情，但这似乎没有任何共同点。

Answer 1

不完全清楚问题是什么，但这里是:

1. 您看到的 POST“成为”OPTIONS 请求是 preflighting - 当发出跨域 XHR 请求时，浏览器会在某些情况下做出决定(例如，当发出内容类型设置为 application/x-www-form-urlencoded、multipart/form 以外的内容的 POST 时-data 或 text/plain) 在实际发出请求之前首先检查服务器是否允许该请求。

2. 您没有提到您是否可以控制服务器端的事物，但如果您这样做了，您可以选择使用

   响应 OPTIONS 请求

   Access-Control-Allow-Origin: http://guy.lt
   Access-Control-Allow-Methods: POST, OPTIONS
   

   让您的 JavaScript 上传通过。

3. Facebook 似乎采用的方法是设置 document.domain 属性，如果父窗口 (www.facebook.com) 和来自另一台服务器的 iframe相同的域 (uploads.facebook.com) 设置为相同的值 (facebook.com)，每个脚本都可以与另一个通信 ¹ 。这可用于对窗口或 iframe 的原始域进行跨 [子] 域请求。因此来自 www.facebook.com 的父窗口可以在 iframe 中调用从 uploads.facebook.com 加载的 JavaScript，然后允许请求返回 uploads.facebook.com。 This blog post更详细地描述了这种技术。