我正在尝试直接上传S3存储桶上的文件,这将减少我服务器上的负载。
我的代码在控制台中显示此错误:
XMLHttpRequest cannot load https://xxxxxx.s3.amazonaws.com/xxxxx/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxxxxxxxxx.herokuapp.com' is therefore not allowed access. The response had HTTP status code 403.
我尝试了几件事,你能不能查看我的代码并说出要做出哪些更正:
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://xxxxxxxxxxx.herokuapp.com", true);
xhr.setRequestHeader("Access-Control-Allow-Origin", "https://xxxxxxxxxxxxxx.herokuapp.com");
xhr.onload = function () {
console.log(xhr.responseText);
};
$(document).ready( function() {
$('.direct-upload').each( function() {
var form = $(this);
form.fileupload({
url: form.attr('action'),
//headers:{"Access-Control-Allow-Origin": "https://xxxxxx.herokuapp.com"},
type: 'POST',
datatype: 'xml',
add: function (event, data) {
// Message on unLoad.
window.onbeforeunload = function() {
return 'You have unsaved changes.';
};
// Submit
xhr.send();
data.submit();
},
progress: function(e, data){
// This is what makes everything really cool, thanks to that callback
// you can now update the progress bar based on the upload progress.
var percent = Math.round((data.loaded / data.total) * 100);
$('.bar').css('width', percent + '%');
},
fail: function(e, data) {
// Remove 'unsaved changes' message.
window.onbeforeunload = null;
$('.bar').css('width', '100%').addClass('red');
},
done: function (event, data) {
window.onbeforeunload = null;
// Fill the name field with the file's name.
$('#upload_original_name').val(data.originalFiles[0].name);
$('#upload_custom_name').val(data.originalFiles[0].name);
},
});
});
});
</script>