Метод поста API третьей стороны - ошибка CSP в Angular Blocked

Я пытаюсь опубликовать данные с помощью метода http.post с некоторыми данными, как показано ниже:

APIURL

Вот данные публикации:

service.ts:

component.ts:

HTML:

Я сталкиваюсь со следующей ошибкой:

error-screenshot

{
  "oid": "110000000hWGF",
  "retURL": "http://",
  "company": "",
  "city": "",
  "state": "",
  "campaign_name": "Test",
  "first_name": "test",
  "last_name": "Vejani",
  "email": "[email protected]",
  "phone": "9090990088",
  "": true
}
private api = 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8&orgId=';
postFromData(data: any, id): Observable<any> {
    return this.http.post(this.api + id, data);
}
formdata = {
    fname: '',
    lname: '',
    email: '',
    phone: '',
    acceptTerms: false,
    oid: '00DG0000000hWJV',
    company: '',
    city: '',
    state: '',
    retURL: 'http://',
    campaign_name: 'Test'
  };
 @ViewChild('f') f!: NgForm;
const allValues = {
      "oid": "110000000hWGF",
      "retURL": "http://",
      "company": "",
      "city": "",
      "state": "",
      "campaign_name": "Test",
      "first_name": "test",
      "last_name": "Vejani",
      "email": "[email protected]",
      "phone": "9090990088",
      "": true
    }
public submit() {
    this.httpAPI.postFromData(allValues, '110000000hWGF').subscribe((response) => {
      console.log("response:", response)
    })
}
<form
*ngIf="!isSubmitted"
class="salesforce-form"
name="form"
#f="ngForm"
(ngSubmit)="f.form.valid && submit(f)"
novalidate
>
<input
type="hidden"
name="oid"
value="{{ this.salesforceId }}"
[(ngModel)]="formdata.oid"
#oid="ngModel"
/>
<input
type="hidden"
name="retURL"
value="{{ formdata.retURL }}"
[(ngModel)]="formdata.retURL"
#retURL="ngModel"
/>
<input
id="company"
maxlength="40"
name="company"
size="20"
type="hidden"
[(ngModel)]="formdata.company"
#company="ngModel"
/>
<input
id="city"
maxlength="40"
name="city"
size="20"
type="hidden"
[(ngModel)]="formdata.city"
#city="ngModel"
/>
<input
id="state"
maxlength="20"
name="state"
size="20"
type="hidden"
[(ngModel)]="formdata.state"
#state="ngModel"
/>
<input
type="hidden"
id="{{ this.salesforceId }}"
maxlength="255"
name="campaign_name"
size="20"
[(ngModel)]="formdata.campaign_name"
#campaign_name="ngModel"
/>
<h2
    *ngIf="this.form.formTitle"
    id="{{ this.formtitleid }}"
    class="section-title"
    >
    {{ this.form.formTitle }}
</h2>
<div class="salesforce-page-inputs">
    <div class="sf-container">
        <div class="field">
            <label
                ><span class="field-name"
                >First name <span class="asteric">*</span></span
                ><input
            class="form-field"
            id="first_name"
            maxlength="40"
            name="first_name"
            size="20"
            type="text"
            [(ngModel)]="formdata.fname"
            required
            #fname="ngModel"
            [ngClass]="{ 'is-invalid': f.submitted && fname.errors }"
            /></label>
            <div *ngIf="f.submitted && fname.errors" class="invalid-msg">
                <div *ngIf="fname.errors['required']">
                    First name field is required
                </div>
            </div>
        </div>
        <div class="field">
            <label class="lname-lbl"
                ><span class="field-name"
                >Last name <span class="asteric">*</span></span
                ><input
            class="form-field"
            id="last_name"
            maxlength="80"
            name="last_name"
            size="20"
            type="text"
            [(ngModel)]="formdata.lname"
            required
            #lname="ngModel"
            [ngClass]="{ 'is-invalid': f.submitted && lname.errors }"
            /></label>
            <div *ngIf="f.submitted && lname.errors" class="invalid-msg">
                <div *ngIf="lname.errors['required']">
                    Last name field is required
                </div>
            </div>
        </div>
        <div class="field">
            <label class="email-lbl"
                ><span class="field-name"
                >Email address <span class="asteric">*</span></span
                ><input
            class="form-field"
            id="email"
            maxlength="80"
            name="email"
            size="20"
            type="email"
            [(ngModel)]="formdata.email"
            required
            email
            #email="ngModel"
            [ngClass]="{ 'is-invalid': f.submitted && email.errors }"
            /></label>
            <div *ngIf="f.submitted && email.errors" class="invalid-msg">
                <div *ngIf="email.errors['required']">
                    Email address field is required
                </div>
                <div *ngIf="email.errors['email']">
                    Please use a valid email address
                </div>
            </div>
        </div>
        <div class="field">
            <label class="phone-lbl"
                ><span class="field-name">Phone number</span
                ><input
            maxlength="10"
            type="text"
            class="form-field"
            id="tel-phone"
            name="phone"
            [(ngModel)]="formdata.phone"
            pattern="^[0-9]*$"
            #phone="ngModel"
            [ngClass]="{
            'is-invalid': f.submitted && phone.errors?.pattern
            }"
            /></label>
            <div *ngIf="phone.dirty && phone.invalid" class="invalid-msg">
                <div *ngIf="phone.errors?.pattern">
                    Phone number must only contain numbers
                </div>
            </div>
        </div>
    </div>
</div>
<div class="optional-checkbox" *ngIf="this.form.hasCheckbox">
    <label
        >
        <input
        type="checkbox"
        id="{{ this.salesforceId }}"
        value="1"
        required
        #acceptTerms="ngModel"
        [(ngModel)]="formdata.acceptTerms"
        [ngClass]="{ 'is-invalid': f.submitted && acceptTerms.errors }"
        /><span
            >{{ this.form.checkboxLabel }} <span class="asteric">*</span></span
            >
        <div
            *ngIf="f.submitted && acceptTerms.errors"
            class="invalid-msg text-center"
            >
            This checkbox is required
        </div>
    </label>
</div>
<div class="submit">
    <button class="primary-btn">Submit</button>
</div>
</form>
Полина
Вопрос задан14 февраля 2024 г.

1 Ответ

2
Бажен
Ответ получен16 сентября 2024 г.

Ваш ответ

Загрузить файл.