使用httpclient和formdata的請求資源上不存在“ Access-Control-Allow-Origin”標頭

Question

我是學習Web開發的新手，我認為有很多與我的職稱有關的問題，但沒有得到滿意的答案。 我正在使用Ionic 4 + Angular5。我嘗試了許多答案，但仍然無法正常工作。 我正在使用帶有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); }); }); } 

Answer 1

為了保護用戶，服務器必須聲明某些域（或所有域）中的JavaScript向其提交數據是安全的。 因此，您的url必須實現OPTIONS HTTP方法，並返回允許的Access-Control-Allow-Origin標頭，表示從某些域向其發布數據的代碼是安全的。 有關更多說明，請參見Mozilla CORS文檔 。

Answer 2

在標頭中添加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，則必須在后端對其進行修復。