如何使用React异步发布到iframe

Question

我正在使用React，并且有一个iframe，用于显示ssrs服务器生成的pdf文件。如果我在iframe的src属性上使用简单的GET请求，那么它可以工作，但由于有时参数太长，最终我达到了URL字符串限制。 在React应用中，如何将帖子异步发布到iframe？

这是我的尝试，但出现错误403。

getParamView() {
    let paramView = null;
    if (this.selectedReport === "MarketingMaterial") {
        paramView = (
            <form action={ssrsurl + this.selectedReport} method="post" target="reportIframe" className="parameters-container">
                <div>
                    <input name="pGuid" type="hidden" value={this.state.marketingMaterial.guid}/>
                    <input name="pUserName" type="hidden" value={this.state.marketingMaterial.userName}/>
                    <input name="pConfigurationId" type="hidden" value={this.state.marketingMaterial
                        .configurationId}/>

                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <label className="dropdown-label label-inline pm-label">Report Code:</label>
                        <input id="mmReportCode"
                               name="pReportCode"
                               onChange={this.onChangeParam}
                               onBlur={this.onBlur}
                               className="form-control input-group" 
                               value={this.state.marketingMaterial.reportCode} />
                    </span>
                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <span className="empty-span-small">&nbsp;{this.state.marketingMaterial.reportCodeValidation
                        }</span>
                        <label className="dropdown-label label-inline pm-label">Period Date:</label>
                        <input id="mmPeriodDate"
                               name="pPeriodDate"
                               className="form-control input-group"
                               onChange={this.onChangeParam}
                               value={this.state.marketingMaterial.periodDate} />
                    </span>
                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <span className="empty-span-small">&nbsp;</span>
                        <input className="btn btn-outline-secondary" type="submit" value="View Report" />
                    </span>
                </div>
                <div>
                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <label className="dropdown-label label-inline pm-label">Portfolio K2ID:</label>
                        <input id="mmPortfolioK2id" 
                               name="pPortfolioK2Id"
                               onChange={this.onChangeParam}
                               className="form-control input-group"
                               value={this.state.marketingMaterial.portfolioK2id} />
                    </span>
                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <span className="empty-span-small">&nbsp;</span>
                        <label className="dropdown-label label-inline pm-label">Investment K2ID:</label>
                        <input id="mmInvestmentK2id"
                               name="pInvestmentK2Id"
                               onChange={this.onChangeParam}
                               className="form-control input-group" 
                               value={this.state.marketingMaterial.investmentK2id} />
                    </span>
                </div>
                <div>
                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <label className="dropdown-label label-inline pm-label">Shareclass Code:</label>
                        <input id="mmShareClassCode" 
                               name="pShareClassCode"
                               onChange={this.onChangeParam}
                               className="form-control input-group" 
                               value={this.state.marketingMaterial.shareClassCode} />
                    </span>
                    <span className="padding-interior padding-bottom pm-form-grouping">
                        <span className="empty-span-small">&nbsp;</span>
                        <label className="dropdown-label label-inline pm-label">Investment Shareclass Code:</label>
                        <input id="mmInvestmentShareClassCode"
                               name="pInvestmentShareClassCode"
                               onChange={this.onChangeParam}
                               className="form-control input-group" 
                               value={this.state.marketingMaterial.investmentShareClassCode} />
                    </span>
                </div>
                <div>
                    { /*<span className="padding-interior padding-bottom pm-form-grouping">
                        <span className="empty-span-small">&nbsp;</span>
                        <label className="dropdown-label label-inline pm-label">User Name:</label>
                        <input className="form-control input-group" value={this.state.marketingMaterial.userName} />
                    </span>*/
                    }
                </div>
                <div>
                    { /*<span className="padding-interior padding-bottom pm-form-grouping">
                        <label className="dropdown-label label-inline pm-label">Configuration Id:</label>
                        <input className="form-control input-group" value={this.state.marketingMaterial.configurationId} />
                    </span>*/
                    }
                </div>
            </form>
        );
    }
    return paramView;
}

render() {
    let paramView = this.getParamView();

    return (
        <main className="container">
            <div className="row">
               <b>Investment - Fact Sheet</b>
            </div>

            <div className="padding-interior padding-bottom pm-form-grouping">
                <label className="dropdown-label label-inline pm-label">Select Report:</label>
                <div className="dropdown dropdown-left pm-dropdown-container">
                    <ComboBox
                        displayMemberPath="header"
                        selectedValuePath="binding"
                        itemsSource={this.reports}
                        selectedIndexChanged={this.reportChanged}
                    />
                </div>
            </div>

            {paramView}

            <hr/>
            <div >
                <iframe id="reportIframe" name="reportIframe" src={ssrsurl + this.selectedReport} width="100%" height= "800px" frameBorder="0" scrolling="no" />
            </div>
      </main>
    );
}