chrome訪問.NET Web Api的Angularjs應用中的CORS錯誤

Question

我已經閱讀了許多有關CORS和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的包裝。 然后，對於角度和CORS問題，我唯一能找到的就是添加以下內容：

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

我已經做到了，但是仍然行不通，但是然后我實際上並沒有使用$ httpProvider，而是$ resource。

我需要對angular和$ resource做些什么才能使它正常工作？ 就像我說的那樣，在IE11中它可以正常工作，並且在提琴手中觀看數據正在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中運行

Answer 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>