angular - ฉันจะเปลี่ยนเส้นทางไปยัง URL ภายนอกพร้อมพารามิเตอร์แบบโพสต์ได้อย่างไร?

ฉันกำลังใช้แอปพลิเคชัน Jhipster, Spring และ Angular ฉันกำลังพยายามทำคำขอต่อไปนี้:

POST /verifier-2.4.1//webreport HTTP/1.1
Host: verificador.iti.gov.br
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: multipart/form-data; boundary=---------------------------118603263816597716931808034283
Content-Length: 3345
Origin: http://localhost:9000
Connection: close
Referer: http://localhost:9000/signature
-----------------------------118603263816597716931808034283
Content-Disposition: form-data; name="signature_text_box0"
ass.p7s
-----------------------------118603263816597716931808034283
Content-Disposition: form-data; name="signature_file"; filename="ass.p7s"
Content-Type: application/pkcs7-mime
<file>

คำขอนี้ตอบกลับหน้ HTML ดังนี้:

HTTP/1.1 200 OK
Date: Fri, 03 Jan 2020 18:14:13 GMT
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=UTF-8
Set-Cookie: JSESSIONID=795451BF2391F9DF8E09E091EA74E426; Path=/verifier-2.4.1/; HttpOnly
Vary: Accept-Encoding
Content-Length: 17247
Connection: close
<!DOCTYPE html>
<html>
...

ความพยายามครั้งแรกคือการสร้างแท็กปุ่มที่เรียกใช้ฟังก์ชันดังต่อไปนี้:

verifySignature(contentType, field) {
    const data = this.converterToFile(contentType, field);
    const formData = new FormData();
    formData.append('signature_text_box0', 'ass.p7s');
    formData.append('signature_file', data, 'ass.p7s');
    this.http
      .post(`${this.itiVerifierUrl}`, formData)
      .pipe(map((res: HttpResponse<any>) => res.ok))
      .subscribe(
        res => {
          console.log(res);
        },
        (err: HttpErrorResponse) => {
          console.log(err);
        },
      );
  }

แท็กปุ่ม:

<button class="btn btn-primary btn-sm" type="submit" (click)="verifySignature(signature.encodedContentType, signature.encoded)">
                        <fa-icon [icon]="'check'"></fa-icon>
                        <span class="d-none d-md-inline" jhiTranslate="entity.action.verify">Verify</span>
                      </button>

คำร้องทำงานได้ปกติดี แต่ไม่สามารถเปลี่ยนเส้นทางไปยัง URL ที่ต้องการได้

ความพยายามครั้งที่สองคือการสร้างฟอร์ม HTML:

<form method="post" action="https://verificador.iti.gov.br/verifier-2.4.1/webreport"
                          target="_blank" enctype="multipart/form-data">
                          <input type="file" value="{{converterToFile(signature.encodedContentType, signature.encoded)}}" name="signature_file">
                          <input type="hidden" name="signature_text_box0" value="ass.p7s">
                          <button class="btn btn-primary btn-sm" type="submit" onclick="submit()">
                            <fa-icon [icon]="'check'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.verify">Verify</span>
                          </button>
                        </form>

วิธีนี้เปลี่ยนเส้นทาง แต่ไม่ส่งไฟล์ คำขอเป็นดังนี้:

POST /verifier-2.4.1/webreport HTTP/1.1
Host: verificador.iti.gov.br
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: multipart/form-data; boundary=---------------------------25961331511813356741068188571
Content-Length: 365
Origin: http://localhost:9000
Connection: close
Referer: http://localhost:9000/signature
Cookie: JSESSIONID=7C587222D7D9BD550557E9F3CD60B4FD; __utma=119620560.723777640.1574448373.1577393534.1577465493.3; __utmz=119620560.1577465493.3.3.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)
Upgrade-Insecure-Requests: 1
-----------------------------25961331511813356741068188571
Content-Disposition: form-data; name="signature_file"; filename=""
Content-Type: application/octet-stream
-----------------------------25961331511813356741068188571
Content-Disposition: form-data; name="signature_text_box0"
ass.p7s
-----------------------------25961331511813356741068188571--

ในทั้งสองกรณี ฉันกำลังใช้ฟังก์ชันนี้เพื่อแปลงข้อมูลของฉันเป็นไฟล์:

converterToFile(contentType: string, data: string): File {
    const byteCharacters = atob(data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    return new File([byteArray], 'ass.p7s', {
      type: contentType
    });
  }

คำตอบ #1

ดูเหมือนว่าค่าขององค์ประกอบอินพุตสำหรับ type=file จะไม่ตรงกับข้อจำกัดของลิงก์ไฟล์

fileInput.files[0].value = "c:\test.png";

ดังนั้นดูเหมือนว่าคุณสามารถใช้ช่องป้อนข้อมูลแบบซ่อน/ข้อความหรือองค์ประกอบ JSON ใดๆ ที่มีค่าคือข้อความธรรมดาจากข้อมูลเฉพาะ จากนั้นเซิร์ฟเวอร์จะได้รับมันเป็นข้อมูลแบบฟอร์มปกติ

hiddenInput.value = "cheers...";

ขอให้สนุก!