时间戳

首页 > 解决方案 > 上传大文件时，角度文件上传器被阻止

angular - 上传大文件时，角度文件上传器被阻止

问题描述

我有这个适用于小文件的角度文件上传器，但对于大文件失败并出现错误“从源'http://localhost:4200'访问'https://localhost:44326/api/fileUpload'的XMLHttpRequest'已经被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。”

我错过了什么吗？

ts代码

postFile(fileToUpload: File, dataType: string){
    const formData = new FormData();
    formData.append('file', fileToUpload, fileToUpload.name);
    formData.append('dataType', dataType);
    this.http.post<any>(this.rootURL + "/fileUpload", formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress)
          this.progress = Math.round(100 * event.loaded / event.total);
        else if (event.type === HttpEventType.Response) {
          this.message = 'Upload success.';
        }
      }, error=>{
          console.log(error);
      }, () => {
        console.log("done");
      });
  }

NET Core API 发布代码

[HttpPost, DisableRequestSizeLimit]
    public async Task<IActionResult> UploadFile()
    {
        try
        {
            var formCollection = await ControllerContext.HttpContext.Request.ReadFormAsync();
            var file = formCollection.Files.First();

            if (file.Length > 0)
            {
                var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                string dataType = formCollection["DataType"].First();
                string folder = dataType.Trim().StartsWith("sample", StringComparison.OrdinalIgnoreCase) ? "Samples" : "Results";
                var fullPath = Path.Combine(pathToSave, folder, fileName);
                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    file.CopyTo(stream);
                }
                return Ok(new { fullPath });
            }
            else
            {
                return BadRequest();
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"Internal server error: {ex}");
        }
    }

标签： angularasp.net-core-webapi

解决方案

设置标头以允许在 Express 中使用 CORS 来源。在 server.js 文件或邮件文件中添加代码。

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
 });

推荐阅读