В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» с httpclient и formdata

Question

Я новичок в изучении веб-разработки и думаю, что есть много вопросов, связанных с моим названием, но я не получил удовлетворительного ответа.Я использую Ionic 4 + Angular 5. Я перепробовал много ответов, но он все еще не работает.Я использую HttpClient с Promise для загрузки видеофайла вместе с его миниатюрой.Пожалуйста, дайте мне знать, что может быть проблемой в моем случае.Спасибо.

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);
      });
    });
  }

Answer 1

Добавить Access-Control-Allow-Origin в шапку.

// service.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);
      });
    });
  }

Заменить * на фактический URL http://localhost:8888

Примечание. Если ваш сервер не поддерживает CORS, ондолжен быть исправлен в бэкэнде.

Answer 2

В качестве меры предосторожности для защиты ваших пользователей ваш сервер должен объявить, что JavaScript из определенных доменов (или всех из них) безопасен для отправки данных на него.Поэтому ваш URL должен реализовывать HTTP-метод OPTIONS и возвращать разрешающий заголовок Access-Control-Allow-Origin, говорящий о том, что код из определенных доменов безопасен для передачи ему данных POST.См. Mozilla CORS документацию для более подробного описания.