标签: xmlhttprequest-level2

即使我使用适当的头设置服务器(nginx/node.js),我仍然遇到这个CORS问题.

我可以在Chrome网络窗格中看到 - >响应标题:

Access-Control-Allow-Origin:http://localhost

应该做的伎俩.

这是我现在用来测试的代码:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

我明白了

XMLHttpRequest cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

我怀疑它是客户端脚本中的问题而不是服务器配置...

XHR2差异表明

传输ArrayBuffer,Blob,File和FormData对象的能力.

• ArrayBuffer和Blob有什么区别？
• 我为什么要关心能够通过XHR2发送它们？(我可以理解File和FormData的价值)

以下跨源POST请求,其内容类型为multipart/form-data且只有简单的标题是预检的.根据W3C规范,除非我读错了,否则不应该预先检查.我已经证实这种情况发生在Chrome 27和Firefox 10.8.3中.我没有测试任何其他浏览器.

以下是请求标头等:

Request URL:http://192.168.130.135:8081/upload/receiver
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:27129
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryix5VzTyVtCMwcNv6
Host:192.168.130.135:8081
Origin:http://192.168.130.135:8080
Referer:http://192.168.130.135:8080/test/raytest-jquery.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.37 Safari/537.36

这是OPTIONS(预检)请求:

Request URL:http://192.168.130.135:8081/upload/receiver
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:192.168.130.135:8081
Origin:http://192.168.130.135:8080
Referer:http://192.168.130.135:8080/test/raytest-jquery.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.37 Safari/537.36

规范似乎很清楚:

• 只有简单的标题:CHECK
• 只有简单的方法:检查

更新:这是一些简单的客户端代码,它将重现这一点: …

我有这个内容脚本,使用XHR下载一些二进制数据,后来发送到后台脚本:

var self = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  if (this.status == 200) {
     self.data = {
        data: xhr.response,
        contentType: xhr.getResponseHeader('Content-Type')
     };
  }
};
xhr.send();

... later ...
sendResponse({data: self.data});

在后台脚本中接收到这些数据之后,我想形成另一个将这个二进制数据上传到我的服务器的XHR请求,所以我这样做:

var formData = new FormData();
var bb = new WebKitBlobBuilder();
bb.append(data.data);
formData.append("data", bb.getBlob(data.contentType));
var req = new XMLHttpRequest();
req.open("POST", serverUrl);
req.send(formData);

问题是上传到服务器的文件只包含这个字符串:"[object Object]".我想这是因为ArrayBuffer类型在从内容进程转移到后台时以某种方式丢失了？我怎么解决这个问题？

这个代码块有什么区别:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "upload_url");
xhr.send(some_form_data);

还有这个:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.upload.addEventListener("load", uploadComplete, false);
xhr.upload.addEventListener("error", uploadFailed, false);
xhr.upload.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "upload_url");
xhr.send(some_form_data);

我已经在博客和其他SO帖子中看到了这两种实现,但没有人解释为什么他们使用其中一个.我现在能找到的唯一区别是后者在默认的Android浏览器上不起作用,而前者似乎只能处理所有事情.

我正在使用XMLHttprequest上传文件.这是JS函数,它上传文件:

var upload = function(file) {
    // Create form data
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();

    // Open
    xhr.open('POST', this.options.action);

    // Set headers
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.setRequestHeader("X-File-Type", file.type);

    // Send
    xhr.send(formData);
}

在服务器端,在upload.php中我以这种方式读取文件:

file_put_contents($filename, (file_get_contents('php://input')));

一切正常,除了我得到一个PHP警告:

Missing boundary in multipart/form-data POST data in Unknown on line 0.

如果我删除此行: xhr.setRequestHeader("Content-Type", "multipart/form-data");警告消失.

这应该是什么问题？

以下代码中的所有内容都可以使用,除非它永远不会触发xhr.upload.onprogress事件.

$(function(){

    var xhr;

    $("#submit").click(function(){
        var formData = new FormData();
        formData.append("myFile", document.getElementById("myFileField").files[0]);
        xhr = new XMLHttpRequest();
        xhr.open("POST", "./test.php", true);
        xhr.send(formData);

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

        xhr.upload.onprogress = function(e) {
           // it will never come inside here
        }
    });
}); 

这是示例代码(http://jsfiddle.net/epsSZ/1/):

HTML:

<form enctype="multipart/form-data" action="/echo/html" method="post" name="fileinfo" accept-charset="windows-1251">
  <label>Label:</label>
  <input type="text" name="label" size="12" maxlength="32" value="får løbende" /><br />
  <input type="submit" value="Send standart">
</form>
<button onclick="sendForm()">Send ajax!</button>

JS:

window.sendForm = function() {
  var oOutput = document.getElementById("output"),
     oData = new FormData(document.forms.namedItem("fileinfo"));
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "/echo/html", true);
  oReq.send(oData);
}

当我通过标准格式提交提交这种旧方式时,请求有效负载如下所示:

------WebKitFormBoundary2890GbzEKCmB08rz
Content-Disposition: form-data; name="label"

får løbende

但是当我提交这种AJAX方式时,它看起来有点不同:

------WebKitFormBoundaryPO2mPRFKj3zsKVM5
Content-Disposition: form-data; name="label"

får løbende

正如你所看到的,在前一种情况下有一些字符被字符实体替换,但是在使用的情况下FormData有普通的字符串,这当然很好,因为它是utf-8,但是有没有可能使它表现得像标准表格提交？

我正在努力让iOS 6使用XMLHttpRequest POST来上传图像.这适用于桌面和Android Web浏览器,但对于iOS 6,我在发布到的页面上收到错误:"请求正文流用尽".(将iOS模拟器与Safari Web Inspector一起使用).

以下是该页面的基本代码:

function fileSelected() {
    var file = document.getElementById('fileToUpload').files[0];
    if (file) {
        var fileSize = 0;
        if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
    }
}
function uploadFile() {
    var fd = new …

我在我的应用程序中添加了一项新功能,允许用户按步骤完成一个过程.

Step1选择下拉值

点击下一步按钮和第2步(ajax请求加载并呈现局部视图,呈现树视图)

点击下一步按钮

第3步(通过XMLHttpRequest上传文件)

点击下一步按钮

步骤4(另一个ajax请求呈现部分视图)由于某种原因,此请求永远不会命中控制器操作方法.奇怪的是,如果我在步骤2中发布操作方法,它将成功发布,但我对此步骤有不同的操作.

我在IE 10 Developer工具中收到以下警告

SEC7127:针对CORS请求阻止了重定向.

XMLHttpRequest:网络错误0x800c0014,发生重定向问题.SCRIPT7002:XMLHttpRequest:网络错误0x800c0014,发生重定向问题.

上述错误似乎与此步骤之前的XMLhhtprequest有关.我试图将XMLhttprequest设置为NULL或尝试将其置于其成功事件上.我在第4步中不明白,我仍然可以发布到第2步的动作但不是另一个动作？

第3步

  function handleFiles() {

        var formdata = new FormData(); //FormData object
        var xhr = new XMLHttpRequest();
        xhr.open('POST', fileUploadURL);
        xhr.setRequestHeader('Content-type', 'multipart/form-data');

        //Appending file information in Http headers
        xhr.setRequestHeader('X-File-Name', document.getElementById('myFile').files[0].name);
        xhr.setRequestHeader('X-File-Type', document.getElementById('myFile').files[0].type);
        xhr.setRequestHeader('X-File-Size', document.getElementById('myFile').files[0].size);

        //Sending file in XMLHttpRequest
        xhr.send(document.getElementById('myFile').files[0]);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                $("input[id=filestoredname]").val(xhr.responseText);
                alert("file saved..");

            }
        }
                return false;
    }

var instrumentSelectionUrl = '@Url.Action("Step2", "ErrorCode")';//step2
var finalTreeViewUrl = …