ajax请求跨源请求阻止错误 [英] ajax request Cross-Origin Request Blocked error
本文介绍了ajax请求跨源请求阻止错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个项目;第一个是asp.net web项目，第二个是嵌入式http服务器库项目。
嵌入式http服务器项目取自：嵌入式http服务器项目
我想将用户本地的视频文件保存到用户的共享存储中。我正在使用ajax请求从浏览器发送文件。嵌入式http服务器应该获得bytearray并将视频保存在客户端的共享存储上。我有一个问题，我花了几天时间来解决但尚未找到解决方案。
在Chrome中，它停留在stream.CopyTo（streamReader）;
在firefox和IE中它会出现Cross-Origin Request Blocked错误，但firefox会保存文件，即使它会出错。
这是ajax请求代码;
$（ document ）。ready（ function （）{
function hashFile （file，chunkSize，callback）{
var size = file.size;
var offset = 0 ;
var chunk = file.slice（offset，offset + chunkSize ）;
SendChunk（chunk， 0 ）;
var hashChunk = function （）{
var reader = new FileReader（）;
reader.onload = function （e）{
offset + = chunkSize;
if （offset< size）{
chunk = file.slice（offset，offset + chunkSize）;
SendChunk（chunk， 0 ）;
}
else if （offset> size）{
offset - = chunkSize;
var newchunkSize = size - offset;
chunk = file.slice（offset，offset + newchunkSize）;
SendChunk（chunk， 1 ）;
}
};
reader.readAsArrayBuffer（chunk）;
};
function SendChunk（chunk，end）{
if （结束> 0）
{
var ajaxRequest = $ .ajax（{
type： POST，
url： http：// clientip：8080 / savefileend，
contentType： false ，
processData ： false ，
data：chunk
}）;
}
其他 {
var ajaxRequest = $ .ajax（ {
类型： POST，
url： http：// clientip：8080 / savefile，
contentType： false ，
processData： false ，
data：chunk
}）;
ajaxRequest.done（ function （e）{
hashChunk（）;
}）;
ajaxRequest.error（ function （xhr）{
console .log（e ）;
hashChunk（）;
}）;
}
}
}
function fileInputHandler（evt）{
var files = evt.target.files;
var chunkSize = 10485760 ; // bytes
var start = window .performance？ performance.now（）： Date .now（）; // DEBUG
var onHashFile = function （摘要）{
var end = 窗口。性能？ performance.now（）： Date .now（）; // DEBUG
console .log（ this .name，digest，（end-start）+ ' MS' ）; // DEBUG
};
for （ var i = 0 ，len = files.length; i< len; i ++）{
hashFile（files [i]，chunkSize，onHashFile）;
}
}
document .getElementById（'' file1'）
.addEventListener（' 更改'，fileInputHandler， false ）;
}）;
这里是获取请求的嵌入式服务器代码;
var stream = request.GetRequestStream（）;
使用（ var streamReader = new MemoryStream（））
{
stream.CopyTo（streamReader）;
videoTemp = streamReader.ToArray（）;
}
使用（ var fileStream = new FileStream（path，FileMode.Append））
{
fileStream.Write（videoTemp， 0 ，videoTemp.Length）;
}
按 方式，
对于 IE： 如果 我 已启用 访问 数据 来源 跨域来自 设置 - security ... then 它 工作 没有 IE 中输入>错误 。
对于 Chrome： 如果 我 开始 chrome < span class =code-leadattribute> with - disable-web-security parameter 它 工作 没有 chrome 中的code-leadattribute> error 。
但是 我 有 find 解决方案 来自 代码。
需要 建议 紧急..解决方案
（ document ）。ready（< span class =code-keyword> function （）{
function hashFile（file，chunkSize，callback）{
var size = file.size;
var offset = 0 ;
var chunk = file.slice（offset，offset + chunkSize）;
SendChunk（块， 0 ）;
var hashChunk = function （）{
var reader = new FileRead er（）;
reader.onload = function （e）{
offset + = chunkSize;
if （offset< size）{
chunk = file.slice（offset，offset + chunkSize）;
SendChunk（chunk， 0 ）;
}
else if （offset> size）{
offset - = chunkSize;
var newchunkSize = size - offset;
chunk = file.slice（offset，offset + newchunkSize）;
SendChunk（chunk， 1 ）;
}
};
reader.readAsArrayBuffer（chunk）;
};
function SendChunk（chunk，end）{
if （结束> 0）
{
var ajaxRequest =
.ajax（{
类型： POST，
url： http：// clientip：8080 / savefileend，
contentType： false ，
processData： false ，
data：chunk
}）;
}
其他 {
var ajaxRequest =
.ajax（{
type： POST，
url： http：// clientip：8080 / savefile，
contentType ： false ，
processData： false ，
data：chunk
}）;
ajaxRequest.done（ function （e）{
hashChunk（）;
}）;
ajaxRequest.error（ function （xhr）{
console .log（e ）;
hashChunk（）;
}）;
}
}
}
function fileInputHandler（evt）{
var files = evt.target.files;
var chunkSize = 10485760 ; // bytes
var start = window .performance？ performance.now（）： Date .now（）; // DEBUG
var onHashFile = function （摘要）{
var end = 窗口。性能？ performance.now（）： Date .now（）; // DEBUG
console .log（ this .name，digest，（end-start）+ ' MS' ）; // DEBUG
};
for （ var i = 0 ，len = files.length; i< len; i ++）{
hashFile（files [i]，chunkSize，onHashFile）;
}
}
document .getElementById（'' file1'）
.addEventListener（' 更改'，fileInputHandler， false ）;
}）;
这里是获取请求的嵌入式服务器代码;
var stream = request.GetRequestStream（）;
使用（ var streamReader = new MemoryStream（））
{
stream.CopyTo（streamReader）;
videoTemp = streamReader.ToArray（）;
}
使用（ var fileStream = new FileStream（path，FileMode.Append））
{
fileStream.Write（videoTemp， 0 ，videoTemp.Length）;
}
按 方式，
对于 IE： 如果 我 已启用 访问 数据 来源 跨域来自 设置 - security ... then 它 工作 没有 IE 中输入>错误 。
对于 Chrome： 如果 我 开始 chrome < span class =code-leadattribute> with - disable-web-security parameter 它 工作 没有 chrome 中的code-leadattribute> error 。
但是 我 有 find 解决方案 来自 代码。
需要 建议 紧急 ..
Hi,
I have two projects; First one is a asp.net web project and the second one is embedded http server library project.
Embedded http server project is taken from : embedded http server project
I want to save a video file from user's local to user's shared storage. I'm getting and sending file from browser using ajax request. Embedded http server is supposed to get bytearray and save video on client's shared storage. I have a problem that I spent days to solve but not yet found a solution.
In chrome it stucks on stream.CopyTo(streamReader);
In firefox and IE it gives "Cross-Origin Request Blocked" error but firefox saves file even it gives the error.
Here is the ajax request code;
$(document).ready(function () {
function hashFile(file, chunkSize, callback) {
var size = file.size;
var offset = 0;
var chunk = file.slice(offset, offset + chunkSize);
SendChunk(chunk,0);
var hashChunk = function () {
var reader = new FileReader();
reader.onload = function (e) {
offset += chunkSize;
if (offset < size) {
chunk = file.slice(offset, offset + chunkSize);
SendChunk(chunk,0);
}
else if (offset > size){
offset -= chunkSize;
var newchunkSize = size - offset;
chunk = file.slice(offset, offset + newchunkSize);
SendChunk(chunk,1);
}
};
reader.readAsArrayBuffer(chunk);
};
function SendChunk(chunk,end){
if(end>0)
{
var ajaxRequest = $.ajax({
type: "POST",
url: "http://clientip:8080/savefileend",
contentType: false,
processData: false,
data: chunk
});
}
else{
var ajaxRequest = $.ajax({
type: "POST",
url: "http://clientip:8080/savefile",
contentType: false,
processData: false,
data: chunk
});
ajaxRequest.done(function (e) {
hashChunk();
});
ajaxRequest.error(function (xhr) {
console.log(e);
hashChunk();
});
}
}
}
function fileInputHandler(evt) {
var files = evt.target.files;
var chunkSize = 10485760; // bytes
var start = window.performance ? performance.now() : Date.now(); // DEBUG
var onHashFile = function (digest) {
var end = window.performance ? performance.now() : Date.now(); // DEBUG
console.log(this.name, digest, (end - start) + 'ms'); // DEBUG
};
for (var i = 0, len = files.length; i < len; i++) {
hashFile(files[i], chunkSize, onHashFile);
}
}
document.getElementById('file1')
.addEventListener('change', fileInputHandler, false);
});
and here is the embedded server code to get the request;
var stream = request.GetRequestStream();
using (var streamReader = new MemoryStream())
{
stream.CopyTo(streamReader);
videoTemp = streamReader.ToArray();
}
using (var fileStream = new FileStream(path, FileMode.Append))
{
fileStream.Write(videoTemp, 0, videoTemp.Length);
}
By the way,
For IE: If I enabled "Access data sources across domains" from setting -security... then it works without error in IE.
For Chrome: If I start chrome with --disable-web-security parameter it works without error in chrome.
But I have find the solution from code.
Need suggestions urgently.. 解决方案
(document).ready(function () { function hashFile(file, chunkSize, callback) { var size = file.size; var offset = 0; var chunk = file.slice(offset, offset + chunkSize); SendChunk(chunk,0); var hashChunk = function () { var reader = new FileReader(); reader.onload = function (e) { offset += chunkSize; if (offset < size) { chunk = file.slice(offset, offset + chunkSize); SendChunk(chunk,0); } else if (offset > size){ offset -= chunkSize; var newchunkSize = size - offset; chunk = file.slice(offset, offset + newchunkSize); SendChunk(chunk,1); } }; reader.readAsArrayBuffer(chunk); }; function SendChunk(chunk,end){ if(end>0) { var ajaxRequest =
.ajax({ type: "POST", url: "http://clientip:8080/savefileend", contentType: false, processData: false, data: chunk }); } else{ var ajaxRequest =
.ajax({ type: "POST", url: "http://clientip:8080/savefile", contentType: false, processData: false, data: chunk }); ajaxRequest.done(function (e) { hashChunk(); }); ajaxRequest.error(function (xhr) { console.log(e); hashChunk(); }); } } } function fileInputHandler(evt) { var files = evt.target.files; var chunkSize = 10485760; // bytes var start = window.performance ? performance.now() : Date.now(); // DEBUG var onHashFile = function (digest) { var end = window.performance ? performance.now() : Date.now(); // DEBUG console.log(this.name, digest, (end - start) + 'ms'); // DEBUG }; for (var i = 0, len = files.length; i < len; i++) { hashFile(files[i], chunkSize, onHashFile); } } document.getElementById('file1') .addEventListener('change', fileInputHandler, false); });
and here is the embedded server code to get the request;
var stream = request.GetRequestStream(); using (var streamReader = new MemoryStream()) { stream.CopyTo(streamReader); videoTemp = streamReader.ToArray(); } using (var fileStream = new FileStream(path, FileMode.Append)) { fileStream.Write(videoTemp, 0, videoTemp.Length); }
By the way, For IE: If I enabled "Access data sources across domains" from setting -security... then it works without error in IE. For Chrome: If I start chrome with --disable-web-security parameter it works without error in chrome. But I have find the solution from code. Need suggestions urgently..
这篇关于ajax请求跨源请求阻止错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
