Javascript 为什么我的API中没有启用CORS？

我有一个简单的API（WebAPI2），其中我尝试熟悉承载身份验证

我可以确认令牌端点正在使用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服务器来运行，因此我需要在API上启用CORS来进行这些调用。但是，我尝试的所有内容似乎都没有任何效果（意味着没有CORS标题）：

在运行节点http服务器的web应用程序中使用与上述相同的javascript调用，始终会导致2个错误：

加载资源失败：服务器响应状态为400（错误请求）（

{“错误”：“unsupported\u grant\u type”}

）

无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”。响应的HTTP状态代码为400

检查Postman中的标题，我找不到任何与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或客户端缺少一些非常基本的配置，但我不知道它是什么。

要启用CORS，我们需要为所有控制器设置源、头和方法。

我们可以通过以下两种方法之一来实现这一点

1。向控制器添加属性

2。在我们的Web.config文件中配置此选项

`<system.webServer>
     <httpProtocol>
       <customHeaders>
         <add name="Access-Control-Allow-Origin" value="*" />
         <add name="Access-Control-Allow-Headers" value="Content-Type" />
         <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>`

`
`

问题确实出在“客户”身上

正确的设置是使用

app.UseCors（CorsOptions.AllowAll）

在此之后，我确保http服务器（
http服务器-c-1
）没有缓存任何文件，并从Google Chrome中删除了所有临时存储的文件。
如果没有这一点，旧的javascript代码将被提供，这是这些错误消息的原因之一

现在，我能够使用问题中的代码进行身份验证，然后访问受保护的资源：

$.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);
});

正如您从我的问题中所看到的，我已经安装了该软件包，并且我尝试在全局范围内启用CORS，而不是在每个控制器或每个操作基础上启用CORS。为了启用CORS，我们需要为所有控制器设置源、头和方法，我们可以通过属性或web配置方法来实现这一点，更新的答案可能会有所帮助。
`<system.webServer>
     <httpProtocol>
       <customHeaders>
         <add name="Access-Control-Allow-Origin" value="*" />
         <add name="Access-Control-Allow-Headers" value="Content-Type" />
         <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>`

$.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);
});