如何在 ASP.NET Web api + Angular 中启用跨域

Question

我的项目是：ASP.NET Web Api C# With Angular

我正在尝试使用允许来自 Angular 客户端的跨域进行简单的 http 获取

请求：

$http.defaults.headers.common['X-Auth-Key'] = 'somekey';
$http.defaults.headers.common['X-Auth-Email'] = 'someuser';
$http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
$http.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
return {
    GetDomains: function () {
      return  $http({
          method: "get",
          url: "https://api.cloudflare.com/client/v4/zones/cd7d068de3012345da9420df9514dad0/dns_records?page=3&per_page=20&order=type&direction=asc",
          responseType: 'json'
        }).then(function mySucces(response) {
            return response.data;
        })
    }
}
});

在回复中我可以看到：

access-control-request-headers:access-control-allow-methods、access-control-allow-origin、x-auth-email、x-auth-key

和错误：

XMLHttpRequest 无法加载 https://api.cloudflare.com/client/v4/zones/cd7d068de3012345da9420df9514dad0/dns_records?page=3&per_page=20&order=type&direction=asc。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost' 不允许访问。响应的 HTTP 状态代码为 400。

我正在尝试使用带有 Visual Studio 2015 的 iis express 来做到这一点

IIS Express applicationhost.config 和 Web.Config 文件有：

    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="X-Powered-By" value="ASP.NET" />
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time"/>
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
                <add name="Access-Control-Allow-Credentials" value="true"/>
        </customHeaders>
        <redirectHeaders>
            <clear />
        </redirectHeaders>
    </httpProtocol>

App_Start / WebApiConfig.cs 文件：

         var corsAttr = new EnableCorsAttribute("https://api.cloudflare.com", "*", "*");
        config.EnableCors(corsAttr);

还是同样的错误

我什么都试过了 也许你可以帮助我

谢谢！

Answer 1

您需要按照本文所述在 WebApi 后端启用 CORS：

Enabling Cors

必要的部分是用这个commamd为cors安装包：

Install-Package Microsoft.AspNet.WebApi.Cors

然后将所需的方法添加到您的 Startup/WebConfig

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

然后，您需要在应用范围内或特定于您的控制器中启用 Cors：

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // Controller methods not shown...
}

要全局启用 CORS，您需要创建一个 Cors 配置，如下例所示：

public static void Register(HttpConfiguration config)
{
    var cors = new EnableCorsAttribute("www.example.com", "*", "*");
    config.EnableCors(cors);
    // ...
}