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

Question

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

function local_upload_photo(form_data)
{    
    var boundary    = "-----------------------------" + (new Date).getTime();
    var CRLF        = "rn";
    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上做同样的事情，或者只是移动upload家伙。但是，客户不同意。

所以在搜索了一段时间后，我遇到了网站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 '成为'一个选项请求是preflighting -当做出跨域XHR请求时，浏览器决定在某些情况下(例如，当POST与内容类型设置为application/x-www-form-urlencoded, multipart/form-data, or text/plain以外的东西时)首先检查请求是否会被服务器允许，然后才真正做出来。

2. 你没有提到如果你有控制服务器端的东西，但如果你这样做，你可以选择响应OPTIONS请求

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

3. Facebook似乎采取的方法是设置document.domain属性，如果父窗口(www.facebook.com)和来自同一域(uploads.facebook.com)上的另一个服务器的iframe设置为相同的值(facebook.com)，从每个脚本可以交谈到另一个¹。这可以用来做跨[子]域请求的窗口或iframe的原始域。因此，www.facebook.com的父窗口可以调用iframe中从uploads.facebook.com加载的JavaScript，然后允许请求返回uploads.facebook.com。