CORS尝试将对象从asp.net Web API 2返回到Angular Front端时出错

Question

所以我有两个项目，一个是asp.net Web API2，另一个是Angular 1.5 Client端。我开始很简单，只是返回一个对象列表，但是当我尝试这个时，我总是得到错误No 'Access-Control-Allow-Origin' header is present on the requested resource.，这对我来说非常混乱，因为如果我返回一个字符串列表我不会得到这个错误和数据加载正常 这是我的角度呼叫：

$http.get("http://localhost:53574/api/ReturnStringList")
    .then(function(response) {
    //success
    console.log(response.data);
    angular.copy(response.data, vm.links);
    }, function (error) {
    //failure
    vm.errorMessage = "Failed to load data";
    });

Web API控制器方法

// GET api/DataController
[HttpGet]
public IEnumerable<string> Get()
{
    var stringList= db.Links.Take(10).Select(x => x.LinkString).ToList();
    return stringList;
}
// GET api/DataController/5
[HttpGet]
public IEnumerable<Link> Get(string id)
{
    var links = db.Links.Take(10).ToList();

    return links;
}

我的Web API的配置文件：WebApiConfig

public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services


        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        var cors = new EnableCorsAttribute("*", "*", "GET, POST");
        config.EnableCors(cors);

        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
    }

因此，如果我将获取网址更改为api/ReturnStringList，它会返回字符串列表，但是我会转到api/ReturnStringList/5它会返回下面的错误，而不会更改任何其他内容。< / p>

我已经检查了响应，我可以看到失败的情况下标题不存在，但显然存在于后续的情况下，但我不明白为什么会发生这种情况。

编辑：我查看了@Jim G建议的其他主题，但没有解决。我正在使用建议的NuGet包，我已经调整了我的配置顺序，注意到没有改变

**更新：**我发现服务器上出现了问题，在使用fiddler之后我发现该对象没有被正确序列化。添加GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;后，它正常工作

Answer 1

相信您需要将OPTIONS方法添加到CorsEnableAttribute。

 var cors = new EnableCorsAttribute("*", "*", "GET, POST, OPTIONS");

你会注意到一个选项呼叫在Get请求之前熄灭，以进行一些飞行前嗅探。如果您不支持该方法，则CORS无法正常工作。来自Mozilla的write up on CORS

  

规范规定浏览器＆＃34;预检＆＃34;请求，   使用HTTP OPTIONS从服务器请求支持的方法   请求方法，然后，在＆＃34;批准＆＃34;从服务器，发送   使用实际的HTTP请求方法的实际请求。