Angular pobieranie PDF

Question

Cześć.

Mam problem w swoim Angular 9 z pobieraniem PDF. Otóż pobieranie odbywa się za pomocą HttClient.

kod - componentu :

  generateQrLabel() {

    this.creatorLabelService.generateQrLabel(this.mixtureUsageId, this.selectedSizeQrLabel).subscribe((data) => {

      const downloadURL = window.URL.createObjectURL(data);
      const link = document.createElement('a');
      link.href = downloadURL;
      link.download = "help.pdf";
      link.click();

    });

kod - service:

 generateQrLabel(mixtureUsage: string, size = 1) {

   const httpOptions = {
     responseType: 'blob' as 'json',
     headers: new HttpHeaders({
       'Content-Type': 'application/x-www-form-urlencoded',
       'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'
     })
   };

  return this.http.get(`${environment.apiUrl}/generate/mini/label/` + mixtureUsage + '/' + size, httpOptions);
 }

Moje nagłówki podczas wysyłania zapytania: 

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE2MDM4Njk4MzMsImV4cCI6MTYwMzg3ODQzMywicm9sZXMiOlsiUk9MRV9PV05FUiJdLCJ1c2VybmFtZSI6ImJvaGVtYS5taWNoYWxAZ21haWwuY29tIn0.JsoPlTxSImQvR0cHQa9OKp_Qvpu59tQBF6CRlGPIsH1aXLjiH77BAsyzjSjyEwJRIiGxx8govp5jr7nLrsIqf437DuQjDKXU38Y08wkocQW8oJR5T3xhF4fDyzQEn957sr6AydT6h3RHM9WrV09yG32XoSEpzW6i29pKJ6EnvrO4r-0ZfcW9mRLAn869QvqQla_wMVYN3EHOqYRNPeBHRUElBQcs44TKlQyaUZImETlDkMDbcsASOQNeCR5m3Tkct2o0BU2ySCMuwom9t13VzK-2M1BVCUClPS2FFG9hCNuuF3zNdtLXIzOLmiw35oXctyZh9Qji3jydI0VwMP5DL0uXg112jFfaPu2fMw6ZSTaP9Ir7t69l5kNGlOmBex9mxWsTculZfbQs6DbbC38buAphVmJtX-FqrGMfaro21-ntJ-KWhgmJGetlicGKjqTlwMCXj8coqD2b9GKLkKX9b6r4iwyiOvETVbWh9hTKuOKjmXw86oqeNgYAATm1nTzy4qWXegUzsRGW-yxnW2CfuF2Ro6VOY9QWMKJ9WBuSEc-jlebeUzfyv-JoLqKTluP9BboSQ23y6x3USj0wA59MUIXCMEO4Mp2wXbgUovSpBf-FVJhKa3xmV72G2ASRhO1GtsyG3xCtrXer48KWAy27yWSkqFILaZTjztUpeBzeh-k
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36

Problem jest, że ciągle dostaje nieznany błąd w consoli. Back-end działa dobrze bo był testowany i wszystko działa.

Z góry dziękuje za pomoc.

Comments

Natomiast w PostMan po wysłaniu tego do serwera otrzymuje cała wartość w postaci binerner pdf. A jak dam download to pobiera od razu ten plik .

---

Wygeneruj kod ajaxa z Postmana (JavaScript - Fetch powinien wystarczyć) -> https://learning.postman.com/docs/sending-requests/generate-code-snippets/

i uruchom go z konsoli przeglądarki - to wyśle czysty ajax (bez ewentualnego wpływu Angulara). Czy w ten sposób wykona się prawidłowo?

---

Zrobiłem i ten sam błąd.

Wygenerował mi coś takiego: 

 function testPdf() {
      var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE2MDM4NzcwMTEsImV4cCI6MTYwMzg4NTYxMSwicm9sZXMiOlsiUk9MRV9PV05FUiJdLCJ1c2VybmFtZSI6ImJvaGVtYS5taWNoYWxAZ21haWwuY29tIn0.u4SkpCVFKZAA9MNi7GGLC2Zy0r3AhsPkL2nxEu4s-lfpG45Q5rpNA1JWCL2-S4wad7KFGxBl90tQRzYiyBWm90ELuB-v9_a3Gv_h8Q_ATL16ouQTAyXK4vMX5lRAhoU3i2t1LdjKmndEx9KQMufJwxhQ4OFhpI4FN9AxEkbVIPYj_fK852UKOLn4J5mJpknKLPG7FlvGY8BkW9D7rwW1J1y8rx76_2e8v7BQfWyAT60F6YMUgc2pvbUxx7wkoyg1V1o2jd_JUVAAItFjM1cKSNlzS2uALlSby76Pat81S2wnwD_fmTi3PdwDhGq8oSf_6jYQZblR_Nor54TAwF8kJmgn6NoeOSH3qc5AP4tjpwCctyAxSaj7clxYK_aEgS9koxd30MCVmFFWfqb_SZ1PY0ZiqENXMR7eqimEPuYysUi7I6HmAQUzIwRhRwDP5CpU8jXuzP3tHJ9fuY6K_rBQy80yKBwiM89IGQ25NCl81n6bR-jL_FQf4jIEqzxrKNLP699gkiiyhW2VayQ8ONHAOBa5de-E0LkYQGM5thLOH-lEqBdoMV_9L511Yv3mdE2AtJyAGRCoXymyRJyuHEBNPH_m94Z6j5qi1g_Brp-QFUB11VdaJhGgbR8RtVh3zlepnrQLCo25U1TERBWAD9lRgKzaicigFWt01SRBMJgxtqY");

      var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
      };

      fetch("http://127.0.0.1:8088/api/generate/mini/label/10c66272-926a-48fb-b948-b2c5002bcbbb/1", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));

Ale dalej to samo co w Angular. A z poziomu pos-man pobiera.

---

Hmm, ciekawy przypadek. :) Nie masz jakiegoś interceptora/proxy/service-workera dla tej apki? Może coś w tle modyfikuje request/response? Otwórz inną przeglądarkę i wyślij ponownie ajaxa, którego wygenerował Ci Postman (ta funkcja testPdf) - jeśli to nie zadziała, to kończą mi się pomysły.

---

Dobra fire-fox zupełnie coś innego wypluwa jakieś konkretne błędy:

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://127.0.0.1:8088/api/generate/mini/label/7917fb8a-3e70-4153-b165-ef8d23bf6e37/1” (brakujący nagłówek CORS „Access-Control-Allow-Origin

i w zakładce sieć pokazuje mi dwa zapytania do tej witryny

oba z kodem 200 tylko ,że jedno z GET a drugie OPTIONS

Answer 1

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://127.0.0.1:8088/api/generate/mini/label/7917fb8a-3e70-4153-b165-ef8d23bf6e37/1” (brakujący nagłówek CORS „Access-Control-Allow-Origin

W Chrome nie było dwóch requestów? Błąd dotyczy Same Origin Policy - apkę serwujesz z innej domeny niż jest wystawiony endpoint dla tego PDF'a (przeoczyłem to):

Referer: http://localhost:4200/

vs:

Request URL: http://127.0.0.1:8088/api/

Po stronie serwera do odpowiedzi na ten endpoint powinieneś ustawić nagłówek wspomniany w błędzie: Access-Control-Allow-Origin z wartością obejmującą port 4200 (lub możesz to zaczytać z jakiejś zmiennej środowiskowej), albo (co nie jest polecane) jako wildcard.

Instrukcja ustawienia nagłówków CORS dla różnych serwerów: https://enable-cors.org/server.html

Comments

Działa dziękuje za pomoc 

---

Z ciekawości - możesz sprawdzić, czy w Chrome też są wysyłane dwa requesty, gdy nie masz ustawionych nagłówków CORS (czyli tak jak do tej pory)? W Twoim requeście jest co najmniej jeden nagłówek - "Authorization" - który powoduje, że request nie jest tzw. "prostym" i to wymusza na przeglądarce wysłanie dwóch zapytań: preflight i właściwego. Więc dziwne by było, gdyby Chrome wysyłał w tej sytuacji tylko jeden request.

---

Chrom też wysyła dwa tylko to dopiero widać po dodaniu tego nagłówka. Przedtem tego nie było.

---

A jaką metodą HTTP jest wysyłany pierwszy request w Chrome, gdy nie ma nagłówka CORS? Powinno być OPTIONS.

(nie pytam o metodę, którą ustawiasz w kodzie, tylko o stan z zakładki Headers w devtoolsach, gdy już przeglądarka wyśle zapytanie)

---

Jest sam nagłówek GET. Ale po dodaniu tego nagłówka 

Access-Control-Allow-Origin

Działa i w chromie

---

Hmm, to zdaje się być celowe zachowanie Chrome'a. :(

https://stackoverflow.com/a/57631040/4983840