chrome 中的 Angularjs 应用程序中的 CORS 错误访问 .NET Web Api

Posted 2023-03-04

【中文标题】chrome 中的 Angularjs 应用程序中的 CORS 错误访问 .NET Web Api

【英文标题】：CORS error in Angularjs app in chrome accessing .NET Web Api

【发布时间】：2016-05-07 07:20:04

【问题描述】：

我已经阅读了大量关于 CORS 和 angular 的现有问题 - 以及它如何不是 angular 的问题，但需要在服务器上进行设置。我尝试了很多建议，但都无法奏效。

我的 ASP MVc 页面中有一个 angularJS 应用程序。 它从我启用了 CORS 的 web api 2 应用程序获取数据（格式为 JSON）。

控制器是：

    [EnableCors("http://localhost:3419", "*", "*")]
    public class DashboardsController : ApiController
    
        private IDashboardService _dashboardService;

        public DashboardsController(IDashboardService dashboardService)
        
            this._dashboardService = dashboardService;

        


      [HttpGet]
    [EnableQuery()]
    [Route("api/dashboards/")]
    public IHttpActionResult Get()
    
        try
        
            var dashboards = _dashboardService.GetAllDashboards().AsQueryable();

             return Ok(dashboards);
        
        catch (Exception)
        
            return InternalServerError();
        
    

我也加了

config.EnableCors();

到 webapiconfig。

所以理论上这现在应该允许 cors？ 它在 ie 中运行良好，但在 chrome 中没有。

因此另外在 web.config 中找到了对 OPTIONS 处理程序的引用，因此将其注释掉：

> <system.webServer>
>     <handlers>
>       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
>       <!--<remove name="OPTIONSVerbHandler" />-->
>       <remove name="TRACEVerbHandler" />
>       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler"
> preCondition="integratedMode,runtimeVersionv4.0" />
>     </handlers>   </system.webServer>

仍然没有喜悦。所以更多的挖掘导致在 global.asax 中添加以下内容：

protected void Application_BeginRequest()

    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    
        Response.Flush();
    

我发现的关于服务器端的一切我都试过了，但都不起作用，所以我假设它是客户端的东西。

Angular 应用使用 $resource 访问 api 并获取数据：

    function getAllDashboards() 
        var dashboards = $resource(appSettings.serverPath + 'api/dashboards/:id',  id: '@id' ).query();
        return dashboards;
    

我对 Angular 还是很陌生，但理解 $resource 是 $httpProvider 的包装器。然后，我只能找到有关 Angular 和 CORS 问题的内容：

  $httpProvider.defaults.useXDomain = true;
                delete $httpProvider.defaults.headers.common['X-Requested-With'];

我已经这样做了，仍然无法正常工作，但是我实际上并没有使用 $httpProvider，而是使用了 $resource。

我需要对 angular 和 $resource 做些什么来使其正常工作吗？ 正如我所说，在 IE11 中它工作正常，在 fiddler 中观察数据正在 chrome 中检索，但只是返回错误：

XMLHttpRequest 无法加载 http://localhost:2773//api/dashboards。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3419” 访问。

更新： 根据 vidalsasoon 的建议，它现在可以通过 Visual Studio (2012) 在 chrome 中运行，但在服务器上 (Windows 2008 R2 和 IIS7.5) 时仍然不能工作，即使仍在 IE 中工作

【参考方案1】：

在发布 POST 之前，您不必担心 OPTIONS 部分。这是第 2 步。首先尝试执行 GET。

另一个测试是尝试将这些行添加到您的服务器 web.config：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

【讨论】：

这可以通过 Visual Studio 在本地运行，但仍然无法在 iis 上的服务器上运行。在 IE 中仍然可以正常工作，但是通过 chrome 在访问 api 时获得 401 未授权。 Fiddler 显示为：