Javascript 在向web应用程序添加CORS支持时，如何从正确的位置加载脚本、图像等web资源？_Javascript_Jquery_Ajax_Asp.net Mvc_Cors

Javascript 在向web应用程序添加CORS支持时，如何从正确的位置加载脚本、图像等web资源？

javascript jquery ajax asp.net-mvc cors

Javascript 在向web应用程序添加CORS支持时，如何从正确的位置加载脚本、图像等web资源？,javascript,jquery,ajax,asp.net-mvc,cors,Javascript,Jquery,Ajax,Asp.net Mvc,Cors,我有一个asp.net mvc应用程序App1托管在本地IIS上，在端口1066上运行，另一个mvc应用程序App2托管在端口1067上运行我的要求是App2需要将一些数据发布到App1的可用post端点，并且App1必须验证这些数据。如果数据有效，则响应类型为text/html，否则响应错误请求，即http状态码为400 此外，这两个应用程序将托管在不同的域上为了制作上述案例的原型，我在App2中有一个隐藏表单，然后使用jquery触发该表单的提交，该表单的目标是iframe的名称，如下所

我有一个asp.net mvc应用程序App1托管在本地IIS上，在端口1066上运行，另一个mvc应用程序App2托管在端口1067上运行

我的要求是App2需要将一些数据发布到App1的可用post端点，并且App1必须验证这些数据。如果数据有效，则响应类型为text/html，否则响应错误请求，即http状态码为400

此外，这两个应用程序将托管在不同的域上

为了制作上述案例的原型，我在App2中有一个隐藏表单，然后使用jquery触发该表单的提交，该表单的目标是iframe的名称，如下所示：

<form action="http://localhost:1066/user/index" method="POST" target="iframe" style="display: none;" id="mainForm">
    <input type="hidden" value="value1" name="h1" />
    <input type="hidden" value="value2" name="h2" />
    <input type="hidden" value="value3" name="h3" />
    <input type="submit" value="Submit" />
</form>

您可以在下面看到的fiddler中的图像表明，浏览器正在App2目录中查找上面布局文件中的所有脚本和样式，而不是从App1的源加载它。此外，对/Content/css和/bundle/modernizr资源的请求是200，因为App2使用相同的名称定义了bundle。预期结果是必须从localhost:1066//加载这些文件

我无法理解为什么只有在我通过ajax post完成整个过程时才会发生这种情况。当使用常规表单提交而不使用ajax时，同样的源代码也可以正常工作

由于上面的端口不匹配，我是否缺少要在本地IIS中设置的内容？或者我是否错过了App1应用程序提供全面CORS支持的功能？或者App2中的ajax请求缺少什么？或者，在使用ajax时，在localhost开发环境中是否会出现上述行为？

你的问题实际上与CORS无关。在您发布到iframe的第一个示例中，iframe实际上是将其src设置为POST urlhttp://localhost:1066/user/index. 因此，所有的资源图像、脚本等引用都是相对于http://localhost:1066.

在第二个示例中，您将获得与第一个示例中使用的相同的HTML内容，但因为您只是将其直接插入iframe，而不是从中加载http://localhost:1066，资源引用用于http://localhost:1067 相反

可以通过添加来设置用于解析相对路径的基本路径。在这种情况下，在第一个示例中，您将基本设置为与发布到的文件的文件夹相同：

MDN提供了有关该元素的更多信息：

我已在App1主布局文件中添加了此基本标记。但是，在执行常规表单post时，iframe的src是。即使添加了基本标记，图像也不会加载，它仍然会从1067端口位置加载。但是，脚本-requirejs，respond.js是从正确的位置加载的，但是我得到的require没有定义，它通常以常规形式提交。@Yoda在AJAX调用后，您能提供iframe中的HTML转储吗？我已经修改了我的计划，我会调查的。仅供参考，我认为你不想那样评估你的JS。javascript最终将在错误的文档上下文父文档中运行，而不是在iframe中运行。使用eval处理http而不是https响应也是一种安全风险。好的，我将删除它。另外，由于该图像的404结果，iframe的html中没有添加任何内容。我不知道为什么！！谢谢如果你发现有什么问题，请告诉我。

$(document).ready(function() {

    $('body').append("<iframe id=\"iframe\" name=\"iframe\" style=\"width: 1200px; height: 1000px; border: none; margin: 0 auto; display: block;\"></iframe>");

    $("#mainForm").submit();

});

$(document).ready(function() {

  $('body').append("<iframe id=\"iembed\" name=\"iembed\" style=\"width: 1200px; height: 1000px; border: none; margin: 0 auto; display: block;\"></iframe>");

  var params = $('form').serialize();
            $.ajax({
                type: "POST",
                url: "http:// localhost:1066/user/index",
                data: params,
                crossDomain: true
            }).success(function (data, textStatus, jqXHR) {                
                $('#iframe').html(data);
            }).error(function () {
                alert("error");
            });

});

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="POST, OPTIONS" />
  </customHeaders>
</httpProtocol>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>@ViewBag.Title</title>

    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/css")


    <script src="@Url.Content("~/Scripts/Vendor/respond.js")"></script>
    <script src="@Url.Content("~/Scripts/Vendor/require.js")"></script>
</head>
<body>
    <img src="@Url.Content("~/Content/App/Images/abc.gif")" alt="Loading..." />
</body>