PowerBI 自定义视觉对象中 IFrame 内的 ASP.NET MVC 应用程序，执行 jquery

Question

我的 ASP.NET MVC 应用程序托管在 IFrame 中。由于服务器响应时间较长，我在帖子上显示等待符号。这意味着我的帖子基于 jQuery 和 json 来往于我的控制器。运行我的 ASP.NET MVC 应用程序可以独立运行，但在 Iframe 中根本无法运行。

IFrame 位于 PowerBI 内的自定义视觉对象中。

在

Global.asax

中，我有以下代码：

AntiForgeryConfig.SuppressXFrameOptionsHeader = true;

在我的控制器中，我删除了：

[ValidateAntiForgeryToken]

在我看来，我删除了：

@Html.AntiForgeryToken()

发布后，我收到这些响应错误

选项 https://myurl/Edit/707057500079987300 401（未经授权）

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“null”。响应的 HTTP 状态代码为 401。

我已更改控制器和视图以使用 GET 请求。但结果一样，http错误

401

.

我的目标不是让 A 站点与 B 站点交互，只是展示它。

站点 B，我的 ASP.NET MVC 应用程序，将执行一些服务器端操作并显示结果。

通过设置

AntiForgeryConfig.SuppressXFrameOptionsHeader = true

并删除验证，我认为我的目标是可行的。

要求：

OPTIONS /AENettMicrofunctions/InstantReading/GetDetails/707057500079332843 HTTP/1.1
Host: aensmartgrid.ae.no
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Access-Control-Request-Headers: x-requested-with
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: nb-NO,nb;q=0.9,no;q=0.8,nn;q=0.7,en-US;q=0.6,en;q=0.5

回应

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/8.5
X-AspNetMvc-Version: 5.2
X-AspNet-Version: 4.0.30319
Persistent-Auth: true
X-Powered-By: ASP.NET
Date: Thu, 21 Jun 2018 13:59:02 GMT
ntCoent-Length: 5015
Content-Encoding: gzip
Content-Length:       1651

按照下面的建议，我已将以下内容添加到

web.config

<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <httpProtocol> 
        <customHeaders> 
            <add name="Access-Control-Allow-Origin" value="*" /> 
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders> 
    </httpProtocol>
</system.webServer>

我在这里做错了什么？

为什么 http 动词是 OPTION，而在 jQuery 中它显然是 GET？我错过了什么？

我的观点的代码如下。

问候 弗罗德

@model AE.Net.MicrofunctionViews.Models.InstantReadingRequest

@{
ViewBag.Title = "Momentanavlesning spenning";
}

<div>
@Html.ValidationSummary(false, "", new { @class = "text-danger" })
<div class="form-group">
    @Html.Label("model.UsagePoint", "Målepunkt: ")
    @Html.DisplayFor(model => model.UsagePoint)
    @Html.HiddenFor(model => model.UsagePoint, "UsagePointId")
</div>
<div id="divProcessing" class="col-md-10">
    <img src="~/Content/ajax-loader.gif" />
</div>
<div id="divData" class="form-group">
    @Html.Label("model.ReadingResult", "Resultat: ")
    <img src="~/Content/GreenSmiley.jpg" id="GreenSmiley" />
    <img src="~/Content/RedSmiley.jpg"  id="RedSmiley" />
    <div>
        @Html.TextAreaFor(model => model.ReadingResult, new { @cols = "50", @rows = "4" })
    </div>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">

    $(document).ready(function () {

        // Hide the "busy" Gif at load:
        $("#divProcessing").show();
        $("#divData").hide();
        $("#GreenSmiley").hide();
        $("#RedSmiley").hide();

        var usagePointId = $("#UsagePoint").val();
        var url = "@Url.Action("GetDetails", "InstantReading")/" + usagePointId;
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success: function (resp) {                    
                // Hide the "busy" gif:
                $("#divProcessing").hide();
                $("#divData").show();
                if (resp.errors) {
                    
                    var $summaryUl = $(".validation-summary-valid").find("ul");
                    $summaryUl.empty();
                    $.each(resp.errors,
                        function (a, b) {
                            $summaryUl.append($("<li>").text(b.Errors[0].ErrorMessage));
                        });
                }
                else {
                    $("#ReadingResult").val(resp.ReadingResult);
                    var ResultHaveVoltageReading = resp.ResultHaveVoltageReading;
                    if (ResultHaveVoltageReading) {
                        var ResultVoltageReadingIsOk = resp.ResultVoltageReadingIsOk;
                        if (ResultVoltageReadingIsOk) {
                            $("#GreenSmiley").show();

                        }
                        else {
                            $("#RedSmiley").show();
                        }
                    }
                }
            },
            error: function (xhr) {
                $("#divProcessing").hide();
                $("#divData").show();
                $("#ReadingResult").val(xhr.val);
            }
        })
    });
</script>
}

Answer 1

这就是 CORS 问题。

OPTION请求在请求中没有任何认证。导致 IIS 忽略它。 OPTION 请求的自定义 http 处理程序解决了该问题。