来自来源的 Angular 和 WebApi Cors 请求已被 CORS 策略阻止
Posted
技术标签:
【中文标题】来自来源的 Angular 和 WebApi Cors 请求已被 CORS 策略阻止【英文标题】：Angular and WebApi Cors Request from origin has been blocked by CORS policy 【发布时间】：2021-09-15 02:24:19 【问题描述】：我有一个角度应用程序 （角度版本 角 CLI：8.3.26 节点：10.13.0 操作系统：win32 x64 角度：8.2.14）
在 environment.ts 中，我有后端的链接
export const environment =
baseUrlNG: 'http://localhost:4200/',
baseUrlApi: 'http://localhost:8082/backend/api/'
后端是一个 C# WebApi 应用程序。 我使用此配置使用 Visual Studio 对其进行调试。
我安装了 nuget Microsoft.AspNet.WebApi.Cors 并在文件 WebApiConfig.cs 我有这个代码：
public static class WebApiConfig
[EnableCors(origins: "*", headers: "*", methods: "*")]
public static void Register(HttpConfiguration config)
config.EnableCors();
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/controller/language/method/id",
defaults: new method = RouteParameter.Optional, id = RouteParameter.Optional
);
在我所有的后端方法中，我都有这个装饰器
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class AuthenticationController : ApiController
[Route("api/Authentication/language/GuestUser")]
[HttpPost]
[Attributes.SiteParameter_Check]
public IHttpActionResult GuestAuthorization(string language)
//code with breakpoints never raised.
在 Angular 项目中我有这篇文章
function guest()
url = `$environment.baseUrlApiAuthentication/IT/GuestUser`;
return this.http.post(url, , )
.toPromise()
.then(response =>
//other code
)
我收到了这个错误
Access to XMLHttpRequest at 'http://localhost:8082/backend/api/Authentication/IT/GuestUser' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
已经尝试将文件proxy.conf.json放到angular项目的src文件夹中
"/api/*":
"target": "http://localhost:8082/backend/api",
"secure": false,
"logLevel": "debug"
我把这一行放在文件 angular.json 中
"serve":
"builder": "@angular-devkit/build-angular:dev-server",
"options":
"browserTarget": "frontend:build",
"proxyConfig": "src/proxy.conf.json"
,
这是我的网络配置
<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=301879
-->
<configuration>
<configSections>
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</configSections>
<system.web>
<compilation debug="true" targetFramework="4.6.1" />
<httpRuntime targetFramework="4.6.1" executionTimeout="1200" maxRequestLength="1048576" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />
</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, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
<validation validateIntegratedModeConfiguration="false" />
<directoryBrowse enabled="true" />
<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>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="2147483647" />
</webServices>
</scripting>
</system.web.extensions>
<connectionStrings>
---all my connection strings
</connectionStrings>
<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>
</configuration>
我错过了什么？
非常感谢
【问题讨论】：
你试过***.com/a/66620352/3423750吗？ 我的后端是 ASP.NET WebApi 而不是 .NET Core 我之前在[EnableCors] 属性中遇到过methods: "*" 的问题。您是否尝试过明确说明允许的方法？ methods: "GET,POST,PUT,PATCH,DELETE,OPTIONS"。此外，您只需要使用[EnableCors] 来装饰控制器/操作，而不是 config 方法本身。
这并没有解决我的问题。我不知道如何设置赏金，因为我没有解决我的问题。
【参考方案1】：
I also recently experienced same kind of issues while doing the same. I'm copying my MVC API codes here to help you to resolve the same. Kindly configure the same accordingly so that issue will be resolved.
WebApiConfig.cs file
public static class WebApiConfig
public static void Register(HttpConfiguration config)
config.EnableCors();
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/controller/action/id",
defaults: new id = RouteParameter.Optional
);
web.config file (specific node webServer tag showed below)
<system.webServer>
<modules>
<remove name="FormsAuthenticationModule" />
</modules>
<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>
<handlers>
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
<!--<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />-->
<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>
Add Global.asax file below method (This call specifically for PUT,POST related OPTIONS call.
protected void Application_BeginRequest(object sender, EventArgs e)
if (HttpContext.Current.Request.Headers.AllKeys.Contains("Origin") && HttpContext.Current.Request.HttpMethod == "OPTIONS")
// Response.AddHeader("Access-Control-Allow-Origin", "*");
// Response.AppendHeader("Access-Control-Allow-Methods", "*");
// Response.AddHeader("Access-Control-Max-Age", "8000");
Response.Flush();
If want to restrict in controller level add below decorator in your API controller.
[EnableCors(origins: "http://locathost:4200", headers: "*", methods: "*")]
public class AssetsController : ApiController
【讨论】：
【参考方案2】：您确定该端口是服务器监听的端口吗？
不久前我有一个类似的场景（但使用 java 和 Jboss），其中 api-url 的端口和侦听端口不同。
就我而言：
api-url的端口：8080 监听端口：9990所以我不得不这样设置代理：
"/api/*": "目标": "http://localhost:9990", “安全”：错误， “日志级别”：“调试”
【讨论】：
【参考方案3】：我们曾经在 web.config 中有这样的东西。
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
如果我没记错的话，您需要在下面设置以允许 ASP.NET 应用程序接收和处理 OPTION。
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
所有细节都在这篇文章中。 https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
【讨论】：
抱歉，请参阅更新后的答案。很久没有做asp.net了，但我记得由于选项调用而面临同样的角度问题。 已经有这些行了...我用我的网络配置编辑问题 提供样品。除了您的代码似乎没有问题【参考方案4】：把这个放到WebApiConfig中
public static class WebApiConfig
public static void Register(HttpConfiguration config)
var cors = new EnableCorsAttribute("*", "*", "*");// origins, headers, methods
config.EnableCors(cors);
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/controller/id",
defaults: new id = RouteParameter.Optional
);
请添加这些引用
使用 Newtonsoft.Json.Serialization；
使用 System.Web.Http.Cors;
注意：仅更改 WebApiConfig 即可。无需任何配置
【讨论】：
没什么，同样的错误。参考 Newtonsoft.Json.Serialization 没用，使用 System.Web.Http.Cors；已经在那里了。 .net core 还是 .net webApi？ 它是 ASP.NET WebApi 请尝试这样做！ 1：在startup.cs“ConfigureServices”方法中添加“services.AddCors();”在“services.AddMvc().SetCompatibilityVersion(.......);”之后。 2：在startup.cs“配置”方法中添加“app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().AllowCredentials().WithOrigins(“localhost:4200"));”在“app.UseHttpsRedirection()之后” ;"。注意：订购很重要，并删除所有其他相关的cors。 我的解决方案中没有这个文件 (Startup.cs)以上是关于来自来源的 Angular 和 WebApi Cors 请求已被 CORS 策略阻止的主要内容，如果未能解决你的问题，请参考以下文章
404 在 CORS 请求中返回，来自 Angular 服务的一些 Web api 调用
Amplify 和 AppSync 不更新来自多个来源的突变数据
将日期从 Angular 传递到 Web API 2 的正确方法