对预检的响应：尽管启用了 CORS，但“没有 'Access-Control-Allowed-Origin'”
Posted
技术标签:
【中文标题】对预检的响应：尽管启用了 CORS，但“没有 \'Access-Control-Allowed-Origin\'”【英文标题】：Response to preflight: “No 'Access-Control-Allowed-Origin'” despite CORS-enabled对预检的响应：尽管启用了 CORS，但“没有 'Access-Control-Allowed-Origin'” 【发布时间】：2018-02-25 05:57:00 【问题描述】：我无法确定 Angular 4 预检请求未通过 CORS 访问控制检查的问题：“No 'Access-Control-Allowed-Origin'”。我能够成功地从数据库中获取数据，但无法发布/保存数据。我在前端使用 VS 代码来访问我的 Visual Studio 2015 后端。我的 Web Api 控制器具有以下属性：
[EnableCors(origins: "*", headers: "*", methods: "*")]
[HttpPost]
public async Task<IHttpActionResult> Post([FromBody]Employee employee)
_repo.Create(employee);
return Ok();
...但是当提出请求时，我收到以下错误：
XMLHttpRequest 无法加载 http://localhost:54429/api/createEmployee/。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 访问
在我的 vs 代码中，我的服务如下所示：
postEmployeeForm(employee: Employee): Observable<any>
let body = JSON.stringify(employee);
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions( headers: headers );
console.log('posting employee ' , employee);
return this.http.post("http://localhost:54429/api/employees/", body, options)
.map(this.extractData)
.catch(this.handleError)
从帖子中删除正文和选项后的 405 响应。
不知道我错过了什么。
网络配置
<configuration>
<configSections>
<!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</configSections>
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-TBryant.WebAPI-20170303082842.mdf;Initial Catalog=aspnet-TBryant.WebAPI-20170303082842;Integrated Security=True" providerName="System.Data.SqlClient" />
<!--<add name="SampleEntities" connectionString="metadata=res://*/MyModels.csdl|res://*/MyModels.ssdl|res://*/MyModels.msl;provider=System.Data.SqlClient;provider connection string="data source=(localdb)\MSSQLLocalDB;initial catalog=Sample;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />-->
<add name="northwindEntities" connectionString="metadata=res://*/NorthwindModel.csdl|res://*/NorthwindModel.ssdl|res://*/NorthwindModel.msl;provider=System.Data.SqlClient;provider connection string="data source=(localdb)\MSSQLLocalDB;initial catalog=northwind;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
<add name="SampleEntities1" connectionString="metadata=res://*/EmployeeDataModel.csdl|res://*/EmployeeDataModel.ssdl|res://*/EmployeeDataModel.msl;provider=System.Data.SqlClient;provider connection string="data source=(localdb)\MSSQLLocalDB;initial catalog=Sample;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
<appSettings></appSettings>
<system.web>
<authentication mode="None" />
<compilation debug="true" targetFramework="4.6.1" />
<httpRuntime targetFramework="4.6.1" />
</system.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,DELTE,OPTIONS"/>
</customHeaders>
</httpProtocol>-->
<modules>
<remove name="FormsAuthentication" />
</modules>
<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>
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security.OAuth" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security.Cookies" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed" />
<bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="1.1.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Cors" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
</dependentAssembly>
</assemblyBinding>
</runtime>
<entityFramework>
<defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
<providers>
<provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
</providers>
</entityFramework>
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701" />
<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\"Web\" /optionInfer+" />
</compilers>
</system.codedom>
</configuration>
【问题讨论】：
尝试声明特定的标头和方法，而不是通配符 (*)。 @JesusCarrasco 原来这就是我有特定的本地主机 url 但那不起作用所以我打开了通配符 @TroyBryant，如果将 webDAV 模块添加到您的站点或服务器中，并且您的响应只是定义该服务器仅支持获取、发布请求，请尝试删除它。参考链接：weblog.west-wind.com/posts/2015/apr/09/… 您能否介绍如何设置 CORS？你在用 owin 吗？仅使用控制器和设置链接到示例解决方案将是理想的。 @OndrejSvejdar 这是一个 git hub 链接到项目github.com/troyb408 【参考方案1】：我已设法重现您的问题。对我有用的解决方案是替换Web.config 的一部分。在system.webServer 下，添加或替换现有的<handlers> 块：
<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>
如果您已经拥有该确切内容，请尝试将其删除，运行服务器，停止服务器，重新添加内容，然后再次运行服务器。我知道这听起来很奇怪，但我认为这最终为我解决了问题。祝你好运。
更新 #1
现在我们在服务器端发生了一些事情，请尝试删除 Angular 代码中的 Content-Type 标头和 JSON.stringify 内容。即：
postEmployeeForm(employee: Employee): Observable<any>
console.log('posting employee ' , employee);
return this.http.post("http://localhost:54429/api/employees/", employee)
.map(this.extractData)
.catch(this.handleError)
更新 #2
我认为您的 IIS Express 配置可能会覆盖我们所做的一些更改。关闭 Visual Studio，在 Windows 资源管理器中删除解决方案根目录下的 .vs/config 文件夹，然后尝试重新运行该项目。这应该重置您的 IIS Express 设置。如果您对删除文件夹不满意，只需重命名它并按照相同的过程进行操作即可。
更新 #3
我已经设法让您的示例项目运行起来。它演示了 CORS 的一个问题，但是通过使用我最初添加 config.EnableCors 的建议解决了这个问题：
public static class WebApiConfig
public static void Register(HttpConfiguration config)
// Web API configuration and services
config.EnableCors();
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/controller/id",
defaults: new id = RouteParameter.Optional
);
【讨论】：
最初我已将其注释掉。我确实看到一篇文章说取消注释该部分。现在我的错误是 Response for preflight has invalid HTTP status code 405. 405 响应方法不允许添加上图 我将 api 和 angular 代码放在不同的存储库中，但你可以在这里......github.com/troyb408 好的，那么我一定是在其他地方遗漏了一些东西，因为我在 webapiconfig 中启用了 cors 并重新构建和刷新，但仍然有相同的错误 看来是这样。此时我建议您清理项目目录（删除.vs、bin 等），然后将其复制到另一个文件夹。您的 IIS Express 中一定有什么问题。尝试更改端口。【参考方案2】：
问题似乎出在服务器端。
在任何non-simple CORS request 之前，浏览器会发送一个 OPTIONS 预检请求，以确保此服务器允许非简单的 CORS 请求。 （带有 application/json 的 POST 请求并不简单）
在您的情况下，正如错误所暗示的那样，只有当对预检 OPTIONS 请求的响应包含值为“http://localhost:4200”的 access-control-allow-origin 标头时，才会发送您的原始 POST 请求。 （您的屏幕截图中的响应不包含此标题）
您没有写太多关于您的服务器实现的文章，但如果您使用的是 asp.net-web-api，这里有一个简单（有点 hacky）的解决方案，说明如何让它响应这些预检 OPTIONS 请求 - link (Also see the comment there by Marcus Cunningham)
【讨论】：
【参考方案3】：这都是关于服务器端配置的。对于您的开发端测试，您可以使用 Google chrome 及其插件。
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
希望这有帮助。
【讨论】：
以上是关于对预检的响应：尽管启用了 CORS，但“没有 'Access-Control-Allowed-Origin'”的主要内容，如果未能解决你的问题，请参考以下文章
尽管预检响应中有 Access-Control-Allow-Origin 标头，但 CORS 错误
已启用 CORS，但在 POST JSON 时，预检响应的 HTTP 状态代码 404 无效