javascript - 为什么我的 API 中未启用 CORS？

Question

我有一个简单的 API (Web Api 2)，我尝试在其中熟悉承载身份验证。

我可以确认 token 端点正在与 Postman 和简单的 ajax 调用一起使用:

$.ajax({
    url: "http://localhost:51802/token",
    type: "POST",
    contentType: "application/x-www-form-urlencoded",
    data: {
          grant_type: "password",
          userName: "foo",
          password: "password123"
    }
}).done(function(data) {
    console.log(data);
}).fail(function(err) {
    console.log(err);
});

客户端是一个相当简单的淘汰应用程序，使用 npm http-server 来运行，因此我需要在我的 API 上启用 CORS 才能进行这些调用。但是，我尝试的所有方法似乎都没有任何效果(意味着不存在 CORS header ):

//1
public static void Register(HttpConfiguration config)
{
     config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
     /*remaining out of the box configuration*/
}

//2
public void ConfigureAuth(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    /*remaining out of the box configuration*/
}

在运行节点 http-server 的 Web 应用程序中使用与上面相同的 javascript 调用总是会导致 2 个错误:

1. 无法加载资源:服务器响应状态为 400(错误请求)({"error":"unsupported_grant_type"})
2. XMLHttpRequest 无法加载 http://localhost:51802/token 。请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost:8080 ' 因此不允许访问。响应的 HTTP 状态代码为 400。

检查 Postman 中的 header ，我找不到任何与 CORS 相关的条目:

Cache-Control →no-cache
Content-Length →641
Content-Type →application/json;charset=UTF-8
Date →Fri, 17 Mar 2017 06:58:54 GMT
Expires →-1
Pragma →no-cache
Server →Microsoft-IIS/10.0
Set-Cookie →.AspNet.Cookies=CiveOcfPNVqn_sVcJSQdi7VuqcleAd_Z9TD5Fff5m3lI3oZ3uVmThZHClXIAgwqByGoOlhfaCSHM8SwQ_GylajAnPdb0Ta6jmSl-M-CDnNYGdghibUWzSn_6-wgnNov_FGjkX8DSFoFvIYshFuppzbauS8MvUQkiDGVQg5pOvplaqcjD00SnsQMYssd5XQJGtb4NE35rOiF0Uk6hE45QxjAIUaq9LGVy; path=/; HttpOnly
X-Powered-By →ASP.NET
X-SourceFiles →=?UTF-8?B?QzpcUHJvamVrdGVcWWFpYlxZYWliLkFwaVxUb2tlbg==?=

我相当确定我的 API 或客户端缺少一些非常基本的配置，但我不知道它是什么。

Answer 1

问题确实出在“客户端”。

正确的设置是使用app.UseCors(CorsOptions.AllowAll);

此后，我确定 http-server (http-server -c-1) 没有缓存任何文件，并从 Google Chrome 中删除了所有临时存储的文件。 如果没有这个，旧的 JavaScript 代码将被提供，这是这些错误消息的原因之一。

现在我可以使用问题中的代码进行身份验证，然后访问 protected 资源:

$.ajax({
     url: "http://localhost:51802/api/values",
     type: "GET",
     crossDomain: true,
     headers: {
        Authorization: "Bearer U90P0Lh-Q8ZeMyZXDzLSQPCfJVIXlmj94GHjLUY0M_B_Zfm-jojao7lUjZvcz_pLerS5BKwMrQk29eZI618mUZyhZ3gm0bjAy3WCZ4dYS1pv4vTaR8re6i8uriwsmtkm3FMwMxWOIPR0thLyYsjFQ7XM8s7K3pkUiIuEixFT8mG8wMnHe1FD1EoJxhadT7gbmYhm-MRO2cNuf2K8gx4EOyjwM2bsgdhtARA3oSDq5SezFRxLzDtZ32PfSpG61v9jOqIiJ0pWdtgeDSY2W7EusVzyDu0V7MB8kAc4uqNyjlCZFDiEn-mLvJkcqXpRf..."
     }
}).done(function(data) {
    console.log(data);
}).fail(function(err) {
    console.log(err);
});