上传文件时：CORS 策略：请求的资源上不存在'Access-Control-Allow-Origin'标头

Question

前端在react中，服务器在node.jsexpress中。试图使用XMLHttpRequest将文件上传到服务器(在亚马逊上设置-本地一切正常(，我得到了一个错误：

访问'XMLHttpRequesthttps://xxx/api/video'来自原点'https://xxx/'已被CORS策略阻止：否请求的上存在"Access Control Allow Origin"标头资源

我分块上传文件(每个10mb(，当文件较小(<40mb(时没有问题，但当文件较大时就会出现问题。这是不可理解的，因为每个块总是10mb，但不知何故，服务器拒绝了那些属于更大文件的块。根据这一线索，我删除了内容范围标头，其中包含有关文件总大小的信息，但这并没有帮助。

对于cors服务，我使用：

app.use(cors({
origin: true,
credentials: true
}));

上传文件的代码：

const saveFile = () => {
if(videoName.length < 1){
setVidNameErr(true);
}
if((uploadedFile || videoData) && (videoName.length > 0)){
setUploadProgress(0);
//options
const chunkSize = 10000000; // size of one chunk: 10 MB
let videoId = '';
let chunkCounter = 0;
const file = recordingMode ? videoData[0] : uploadedFile;
const fileSize = recordingMode ? videoData[0].size : uploadedFile.size;
const createChunk = (videoId: string, start: number) => {
chunkCounter ++;
const chunkEnd = Math.min(start + chunkSize , fileSize);
const chunk = file.slice(start, chunkEnd);

const formData = new FormData();
if(videoId?.length > 0){
formData.append('videoId', videoId);
}
formData.append('title', videoName);
formData.append('file', chunk);

uploadChunk(formData, start, chunkEnd);
}
const updateProgress = (e: any) => {
if (e.lengthComputable) {  
const numberOfChunks = Math.ceil(fileSize/chunkSize);
const percentComplete = Math.round(e.loaded / e.total * 100);
setUploadProgress(
Math.round(
(chunkCounter - 1) / numberOfChunks * 100 + percentComplete / numberOfChunks
)
)
}
}
const uploadChunk = (formData: any, start: number, chunkEnd: number) => {
setIsVideoBeingSent(true);
const req = new XMLHttpRequest();
const contentRange = "bytes " + start + "-" + (chunkEnd - 1) + "/" + fileSize;
req.upload.addEventListener("progress", updateProgress);    
req.open("POST", `${process.env.URL}/api/video`, true);
req.withCredentials = true;
req.setRequestHeader('lang', router.locale as string)
req.setRequestHeader("Content-Range", contentRange);
//req.setRequestHeader("Content-Type", 'multipart/form-data; boundary=--');

req.onload = () => {
const resp = JSON.parse(req.response)
resp.statusCode === 401 && logoutUser()
setRequestErr({
mess: resp.message, 
code: resp.statusCode
})
videoId = resp.videoId;
start += chunkSize; 

if(start < fileSize){
createChunk(videoId, start);
} else{
chunkCounter = 0;
setIsVideoBeingSent(false);
setModalType('info')
if(resp.status === 200){
setModalInfoType('success')
} else{
setModalInfoType('fail')
}
}
}
req.send(formData);
}
createChunk(videoId, 0);
}
};

基于：https://api.video/blog/tutorials/uploading-large-files-with-javascript

使用以下代码通过表单上传文件：https://www.geeksforgeeks.org/file-uploading-in-node-js/

有效，但是当使用XMLHttpRequest更改文件上载时，cors中的错误再次出现。

是什么原因导致了这个问题，以及如何解决它？

Answer 1

您需要在应用程序上允许您的域。因此，在app.js中添加给定的代码。

app.use(function(req,res,next) {
req.connection.setNoDelay(true)
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Credentials", true);
res.header("Access-Control-Allow-Origin", "https://xxx"); 
res.header('Access-Control-Expose-Headers', 'agreementrequired');

next()
})

您只需要更改域名。https://xxx

Answer 2

这是相关的：CORS错误上传文件~4mb

简单的答案是-由于某种原因，当您对client_max_body_size的设置不足以满足请求时，nginx ingress会通过cors拒绝您。将这个值增加到你需要的任何值，你就应该可以使用了。