时间戳

首页 > 解决方案 > 使用 httpclient 和 formdata 请求的资源上不存在“Access-Control-Allow-Origin”标头

angular - 使用 httpclient 和 formdata 请求的资源上不存在“Access-Control-Allow-Origin”标头

问题描述

在此处输入图像描述

我是学习网络开发的新手，我认为有很多与我的标题相关的问题，但我没有得到任何令人满意的答案。我正在使用 Ionic 4 + Angular 5。我尝试了很多答案，但仍然无法正常工作。我正在使用带有 Promise 的 HttpClient 来上传视频文件及其缩略图。请让我知道我的情况可能是什么问题。谢谢。

Request URL: https://myurl
Request Method: POST
Status Code: 500 Internal Server Error
Remote Address: 34.235.12.171:443
Referrer Policy: no-referrer-when-downgrade
Connection: keep-alive
Content-Length: 0
Date: Sun, 21 Oct 2018 06:44:54 GMT
Server: nginx/1.12.2
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJwYXRtZGJpekBnbWFpbC5jb20iLCJleHAiOjE1NDAxOTA2OTF9.tH6Xb9yNOS4rK4cjI_y9xrv2_o15YOSzfwDD16CiJrU
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryyEQ9AIg1LzkI6FNp
Origin: http://localhost:8100
Referer: http://localhost:8100/mainpage
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
userId: izzy@gmail.com
dealId: 43627630
flLenLong: 788493
mimeType: video/mp4
tnName: thumb.png
flName: mov_bbb.mp4
tnName: (binary)
flName: (binary)
//mainpage.page.ts

uploadFile(blob, tblob, filesize, mimeType, fFilename, token){
    let formData = new FormData();
    formData.set('userId','izzy@gmail.com');
    formData.append('dealId','43627630');
    formData.append('flLenLong',filesize);
    formData.append('mimeType',mimeType);
    formData.append('tnName','thumb.png');
    formData.append('flName',fFilename);
    formData.append('tnName',tblob,'thumb.png');
    formData.append('flName', blob, fFilename);

    const url = 'deals/upfile';

    this.restService.testUpload(formData, url, token)
      .then((response) => {
        console.log("uploadFile resp: " + JSON.stringify(response));
        
        
      }, (error) => {
        console.log(error.status);
      });
  }
//service.ts

testUpload(data,url,secret){
    let purl = BASE_URL+url;

    let clientheaders = new HttpHeaders({
      'Content-Type': 'multipart/form-data',
      'Accept': 'application/json',
      'Authorization': secret,
    });

    return new Promise((response,error)=>{
      this.httpc.post(purl,data, {headers: clientheaders, withCredentials: true})
      .subscribe( (res) => {
        response(res);
      },(err) => {
        error(err);
      });
    });
  }

标签： angularfileionic-framework

解决方案

添加Access-Control-Allow-Origin标题。

//服务.ts

testUpload(data,url,secret){
    let purl = BASE_URL+url;

    let clientheaders = new HttpHeaders({
      'Content-Type': 'multipart/form-data',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Authorization': secret,
    });

    return new Promise((response,error)=>{
      this.httpc.post(purl,data, {headers: clientheaders, withCredentials: true})
      .subscribe( (res) => {
        response(res);
      },(err) => {
        error(err);
      });
    });
  }

替换*为实际网址http://localhost:8888

注意：如果您的服务器不允许 CORS，则必须在后端进行修复。

推荐阅读