Question

我试图直接从客户端上传到Cloudinary服务器，以便我可以跟踪上传进度，但是问题是，当我触发发布请求时，它总是会得到

“从来源“ http：// localhost：4200”访问“ https://api.cloudinary.com/v1_1/[cloudName]/image/upload”处的XMLHttpRequest已被CORS策略阻止：请求标头字段飞行前响应中Access-Control-Allow-Header不允许授权”

当我在朋友的项目中尝试相同的代码时，它可以正常工作，但对我来说却不是，这很奇怪，我不知道问题出在哪里

我的上传功能：

     uploadPhotos() {

this.coverPhotoFormData.append("file", this.coverPhotoFile);
this.coverPhotoFormData.append("upload_preset",[PresetName]);
const req = new HttpRequest('POST', 'https://api.cloudinary.com/v1_1/[CloudName]/image/upload', 
  this.coverPhotoFormData, {
  reportProgress: true,
});

this.http.request(req).subscribe(event => {
  let total = 0;
  if (event.type === HttpEventType.UploadProgress) {
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(percentDone)
  } else if (event instanceof HttpResponse) {

  }

});
}

Answer 1

如果我们向Cloudinary发送OPTIONS请求，我们可以检查相关的访问控制标头。

curl -iX OPTIONS https://api.cloudinary.com/v1_1/cloud/image/upload

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Cache-Control, Content-Disposition, Content-MD5, Content-Range, Content-Type, DPR, Viewport-Width, X-CSRF-Token, X-Prototype-Version, X-Requested-With, X-Unique-Upload-Id
Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS
Access-Control-Max-Age: 1728000
Cache-Control: no-cache
Content-Type: text/plain; charset=utf-8
Date: Thu, 30 Jul 2020 15:20:11 GMT
Server: cloudinary
Status: 200 OK
Vary: Accept-Encoding
X-Request-Id: 4b3cb7f430585a4bc27d3ce4e559ced1
X-UA-Compatible: IE=Edge,chrome=1
X-XSS-Protection: 1; mode=block
Content-Length: 0
Connection: keep-alive

基于您共享的错误消息-Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response-您的上传请求具有“授权”标头，跨域请求不允许使用此标头，因为该标头未在响应标头Access-Control-Allow-Headers下列出。您将需要仔细检查您的配置/代码发出的请求，并确保此标头不是上载调用的一部分，因为它不是必需的。

以下是上传请求所需的最少代码量。它将上传作为Base64 Data URI提交的1x1px图像。（只需替换<cloud_name>和<upload_preset>）-

var fd = new FormData();

fd.append("file", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/TQBcNTh/AAAAAXRSTlPM0jRW/QAAAApJREFUeJxjYgAAAAYAAzY3fKgAAAAASUVORK5CYII=");
fd.append("upload_preset", "<upload_preset>");

fetch('https://api.cloudinary.com/v1_1/<cloud_name>/upload',
  {
    method: 'POST',
    body: fd
  }
);

您可以尝试在上传功能中使用上述代码，而不是当前代码，以查看其是否有效。它将使用默认标题。

从前端直接上传到cloudinary时发生Cors错误

1 个答案: