CORS 不起作用 MVC6 - RC1

Posted 2023-03-04

技术标签:

【中文标题】CORS 不起作用 MVC6 - RC1【英文标题】：CORS does not work MVC6 - RC1 【发布时间】：2016-04-22 11:17:06 【问题描述】：

在 MVC6 应用中启用了 CORS，并且启动看起来像：

我在ConfigureServices() 方法中添加了以下代码：

services.AddCors(options =>
    
        options.AddPolicy("AllowSpecificOrigin",
            builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());
    );

…… 在配置Configure()

app.UseCors("AllowSpecificOrigin");

.......

我的代码尝试从另一个 url 下载 angular 模板，模板被下载（在 fiddler 中看到）。但是我的浏览器控制台说

XMLHttpRequest 无法加载 http://hsa-is-utl32.[mydomain].com/LayoutService//platform/templates/layout/topbanner.html。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://mydevbox.[mydomain].com' 不允许访问。

不知道怎么了？？

【问题讨论】：

您应该包含更多您使用的完整代码。例如，包含中间件的顺序 Configure 很重要。我的意思是app.UseCors("AllowSpecificOrigin"); 应该被称为不晚。其次，您应该写下您使用的 Angular 版本以及 $http 调用和 app.config(function($httpProvider) ... 的外观。需要配置$http 以在Ajax 请求中包含Access-Control-Allow-Origin。请参阅withCredentials: true、$httpProvider.defaults.useXDomain = true;、delete $httpProvider.defaults.headers.common['X-Requested-With']; 等。没用，我的角度配置看起来像：platform.config(["$provide", "$sceDelegateProvider", "$httpProvider", function ($provide, $sceDelegateProvider, $httpProvider) $provide.constant('rootUrl', rootUrl); $sceDelegateProvider.resourceUrlWhitelist([ 'self', 'http://*.[domain].com/**', 'http://*.[domain] .gov/**' ]); $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = true; $httpProvider.defaults.useXDomain = true; ]); app.UseCors("AllowSpecificOrigin") 是 Configure() 方法中的第一个语句.... 我的应用程序从另一个域下载 angular directiv js 文件，并且 angular 模板文件与 js 文件一起定位，但是当 angular 尝试下载模板时会产生错误。您应该使用Fiddler 或 IE/Chrome 的开发者工具来查看 HTTP 流量并查看 Angular 发送的请求的所有 HTTP 标头。如果 X-Requested-With 将被设置，那么你应该删除它（见上面的评论）。 【参考方案1】：

尼克的 web.config sn-p 为我工作。我有两个在 localhost IIS Express 上运行的应用程序的类似情况。它在 Startup.cs 中没有 app.UseCors("AllowSpecificOrigin") 的情况下工作。

<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="http://localhost:10001" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

【讨论】：

【参考方案2】：

我遇到了类似的问题。不能 100% 确定您的设置是什么样的，但也许这会有所帮助。假设我有两个域，我的应用程序所在的 http://myapp.domain/ 和模板所在的 http://templates.domain/template.html。这就是我所做的。

这将为 MVC 6 应用程序 (myapp.domain) 设置 CORS。

public void ConfigureServices(IServiceCollection services)

    services.AddCors(options =>
    
        options.AddPolicy("AllowSpecificOrigin",
                builder => builder.WithOrigins("http://myapp.domain").AllowAnyHeader().AllowAnyMethod().AllowCredentials());
    );

    services.AddMvc();


public void Configure(IApplicationBuilder app)

    app.UseIISPlatformHandler();
    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseCors("AllowSpecificOrigin");
    //make sure its before UseMvc()!!
    app.UseMvc();

然后我在http://templates.domain 的wwwroot 中设置我的web.config 文件，以允许来自http://myapp.domain/ 的CORS。这包括静态文件，例如从不同域引用 Angular 模板。

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://myapp.domain" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

从那时起就很简单了，假设出于某种原因您想从不同的域中获取路由模板，您可以这样做：

(function () 
    "use strict";

    var app = angular.module("myApp", ['ngRoute']);

    // configure the routes
    app.config(['$provide', '$sceDelegateProvider', '$routeProvider', '$locationProvider', '$httpProvider',
        function ($provide, $sceDelegateProvider, $routeProvider, $locationProvider, $httpProvider) 

            $sceDelegateProvider.resourceUrlWhitelist(['self', 'http://templates.domain/**']);
            $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = true;
            $httpProvider.defaults.useXDomain = true;

            //routes
            $routeProvider.when('/', 
                templateUrl: 'http://templates.domain/template.html',
                controller: 'templatesController'
            )
            .otherwise( redirectTo: '/' );

            $locationProvider.html5Mode(true);

            $httpProvider.defaults.headers.common = 
                'Content-Type': 'application/json, charset=UTF-8'
            ;
        ]);

    app.controller('templatesController', ['$scope', function ($scope) 
        $scope.message = 'message from controller';
    ]);

)();

在您的 html 中添加 <div ng-view></div> 并包含 angular-routes。

现在，当您在 Angular 应用中调用模板时，您应该会在响应标头中看到这一点。