在 Visual Studio 中使用 asp.net 的 AngularJs 模态获取 406 不可接受的错误

Question

在尝试运行解决每当我尝试使用 AngularJS 和 bootstrap (uibModal) 模态显示 html 页面时发生的 406 错误后，我发现该错误仅限于我使用的三台计算机中的一台，这使我相信问题一定是问题机器上的配置。我无法弄清楚问题出在哪里。每台计算机都使用 Visual Studio 2015 和项目的精确副本，直到所有依赖项，在调试期间使用 IISExpress。我在这里创建了演示版本并确认了相同的行为 - 在两个上工作，在一个上失败。希望有人至少能让我朝正确的方向看。我已经尝试查看 IIS Express 的设置是否存在差异，但我没有看到任何跳出的内容。

我从基本的 AspNet MVC 项目开始。这是 _Layouts.cshtml 页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="app">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
@Scripts.Render("~/bundles/app");
@Scripts.Render("~/bundles/bootstrap");
@RenderSection("scripts", required: false);
@Scripts.Render("~/bundles/controllers");
@Scripts.Render("~/bundles/jquery");
</body>
</html>

这是 Index.cshtml 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="..\Content\bootstrap.css" type="text/css" media="all" />
    <link rel="stylesheet" href="..\Content\default.css" type="text/css" media="all" />
    <link rel="stylesheet" href="..\Content\site.css" type="text/css" media="all" />
</head>
<body>
<div class="modal-dialog" data-backdrop="false" style="z-index: 1100;">
    <!--<div class="modal fade" id="createModal" data-backdrop="false" style="z-index: 1100;">-->
    <h1>Terms and Conditions</h1>
    <p>Last updated: February 25, 2018</p>
    <p>
        Please read these Terms and Conditions ("Terms", "Terms and Conditions") carefully before using the website (the "Service") operated by My Fake Company ("us", "we", or "our").
        Your access to and use of the Service is conditioned upon your acceptance of and compliance with these Terms. These Terms apply to all visitors, users and others who wish to access or use the Service.
        By accessing or using the Service you agree to be bound by these Terms. If you disagree with any part of the terms then you do not have permission to access the Service.
    </p>
</div>
</body>
</html>

这是 AngularJS 模块：

var app = angular.module('app', ['ngRoute','ui.bootstrap', 'ngMessages']);

var serviceBase = 'http://localhost:46497/';
app.constant('ngAuthSettings', {
    apiServiceBaseUri: serviceBase,
    clientId: 'ngAuthApp'
});

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
});

这里是拦截器（貌似没有涉及到这个问题，因为它在模态调用后没有被命中，但是完全公开了）：

'use strict';
app.factory('authInterceptorService', ['$q',  function ($q) {

    var authInterceptorServiceFactory = {};

    var request = function (config) {
        var contentType = config.headers["Content-Type"];
        config.headers = config.headers || {};
    config.headers = {};

        if (config.headers.Accept != null)
            config.headers.Accept = null;
        if (contentType !== '' && typeof contentType !== 'undefined')
            config.headers["Content-Type"] = contentType;
        return config;
    }


    authInterceptorServiceFactory.request = request;

    return authInterceptorServiceFactory;
}]);

这是我的 AngularJS 控制器：

'use strict';
var app = angular.module('app');
app.controller('createAccountCtrl', ['$scope', '$window', '$timeout', '$uibModal', function ($scope, $window, $timeout, $uibModal) {
    var vm = $scope;

    vm.viewTerms = function () {
        $uibModal.open({
            templateUrl: '/termsAndConditions.html',
            backdrop: false,
            windowClass: 'modal',
            controller: function (
            $uibModalInstance) {
                vm.close = function () {
                    $uibModalInstance.close('cancel');
                };
            }

        });
    }

}]);

在此先感谢您的帮助。

Answer 1

我通过构建新项目解决了这个问题。我将代码复制到新项目中。我怀疑 csproj 文件或 applicationHost.config (IISExpress) 中某处已损坏，但我没有看到它。我能找到的唯一物理差异是错误的 csproj 引用了 TypeScript 2.2，我以为我已经删除了它，但看起来 NuGet 正在放回去。我没有使用打字稿 (angularJs 1.X) 所以它确实很突出。新版本有效，这是主要问题。

在 Visual Studio 中使用 asp.net 的 AngularJs 模态获取 406 不可接受的错误

Get 406 Not Acceptable Error for AngularJs modal with asp.net in Visual Studio

angularjs

asp.net-mvc

visual-studio

iis-express