本文先容怎样在 ASP.NET Core 的应用程序中启用 CORS。
欣赏器安全可以防止网页向其他域发送哀求,而不是为网页提供服务。 此限定称为相同源计谋。 同一源计谋可防止恶意站点读取另一个站点中的敏感数据。 有时,你大概想要答应其他站点对你的应用举行跨域哀求。 有关详细信息,请参阅MOZILLA CORS 一文。
跨源资源共享(CORS):
- 是一种 W3C 标准,可让服务器放宽相同的源计谋。
- 不是一项安全功能,CORS 放宽 security。 API 不能通过答应 CORS 来更安全。 有关详细信息,请参阅CORS 的工作原理。
- 答应服务器明白答应一些跨源哀求,同时拒绝其他哀求。
- 比早期的技能(如JSONP)更安全且更机动。
查察或下载示例代码(怎样下载)
同一原点
如果两个 Url 具有相同的方案、主机和端口(RFC 6454),则它们具有相同的源。
这两个 Url 具有相同的源:
https://example.com/foo.html
https://example.com/bar.html
这些 Url 的劈头差别于前两个 Url:
https://example.net – 个差别的域
https://www.example.com/foo.html – 个差别的子域
http://example.com/foo.html – 个差别的方案
https://example.com:9000/foo.html – 个差别端口
比力泉源时,Internet Explorer 不会思量该端口。
具有定名计谋和中间件的 CORS
CORS 中间件处理惩罚跨域哀求。 以下代码通过指定源为整个应用启用 CORS:
-
- public class Startup
- {
- public Startup(IConfiguration configuration)
- {
- Configuration = configuration;
- }
- readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
- public IConfiguration Configuration { get; }
- public void ConfigureServices(IServiceCollection services)
- {
- services.AddCors(options =>
- {
- options.AddPolicy(MyAllowSpecificOrigins,
- builder =>
- {
- builder.WithOrigins("http://example.com",
- "http://www.contoso.com");
- });
- });
- services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
- }
- public void Configure(IApplicationBuilder app, IHostingEnvironment env)
- {
- if (env.IsDevelopment())
- {
- app.UseDeveloperExceptionPage();
- }
- else
- {
- app.UseHsts();
- }
- app.UseCors(MyAllowSpecificOrigins);
- app.UseHttpsRedirection();
- app.UseMvc();
- }
- }
复制代码
前面的代码:
- 将计谋名称设置为 "_myAllowSpecificOrigins"。 计谋名称为恣意名称。
- 调用 UseCors 扩展方法,这将启用 CORS。
- 使用lambda 表达式调用 AddCors。 Lambda 采取 @no__t 0 对象。 本文稍后将先容设置选项,如
WithOrigins 。
@No__t-0 方法调用将 CORS 服务添加到应用的服务容器:
- public void ConfigureServices(IServiceCollection services)
- {
- services.AddCors(options =>
- {
- options.AddPolicy(MyAllowSpecificOrigins,
- builder =>
- {
- builder.WithOrigins("http://example.com",
- "http://www.contoso.com");
- });
- });
- services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
- }
复制代码
有关详细信息,请参阅本文档中的CORS 计谋选项。
@No__t-0 方法可以链接方法,如以下代码所示:
- public void ConfigureServices(IServiceCollection services)
- {
- services.AddCors(options =>
- {
- options.AddPolicy(MyAllowSpecificOrigins,
- builder =>
- {
- builder.WithOrigins("http://example.com",
- "http://www.contoso.com")
- .AllowAnyHeader()
- .AllowAnyMethod();
- });
- });
- services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
- }
复制代码
留意: URL不得包罗尾随斜杠(/ )。 如果 URL 以 / 制止,比力将返回 false ,而且不返回任何标头。
将 CORS 计谋应用到全部闭幕点
以下代码通过 CORS 中间件将 CORS 计谋应用到全部应用闭幕点:
- public void Configure(IApplicationBuilder app, IHostingEnvironment env)
- {
- // Preceding code ommitted.
- app.UseRouting();
- app.UseCors();
- app.UseEndpoints(endpoints =>
- {
- endpoints.MapControllers();
- });
- // Following code ommited.
- }
复制代码
告诫
通过闭幕点路由,CORS 中间件必须设置为在对 @no__t 和 UseEndpoints 的调用之间实行。 设置不正确将导致中间件制止正常运行。
请参阅在 Razor Pages、控制器和操纵方法中启用 cors,以在页面/控制器/操纵级别应用 cors 计谋。
有关测试上述代码的说明,请参阅测试 CORS 。
使用闭幕点路由启用 Cors
使用闭幕点路由,可以根据每个闭幕点启用 CORS,使用 @no__t 的扩展方法集。
- app.UseEndpoints(endpoints =>
- {
- endpoints.MapGet("/echo", async context => context.Response.WriteAsync("echo"))
- .RequireCors("policy-name");
- });
复制代码
同样,也可以为全部控制器启用 CORS: - <code data-author-content="app.UseEndpoints(endpoints =>
- {
- endpoints.MapControllers().RequireCors("policy-name");
- });
- ">app.UseEndpoints(endpoints => { endpoints.MapControllers().RequireCors("policy-name"); });
- </code>
复制代码
使用属性启用 CORS
@No__t-1EnableCors @ no__t属性提供了一种用于全局应用 CORS 的更换方法。 @No__t-0 特性可为选定的闭幕点(而不是全部闭幕点)启用 CORS。
使用 @no__t 指定默认计谋,并 [EnableCors("{Policy String}")] 指定计谋。
@No__t-0 特性可应用于:
- Razor 页
PageModel
- 控制器
- 控制器操纵方法
您可以将差别的计谋应用于控制器/页面模子/操纵,[EnableCors] 属性。 将 [EnableCors] 属性应用于控制器/页面模子/操纵方法,并在中间件中启用 CORS 时,将应用这两种计谋。 发起不要联合计谋。 使用同一个应用中的 [EnableCors] 特性或中间件。
下面的代码将差别的计谋应用于每个方法:
- [Route("api/[controller]")]
- [ApiController]
- public class WidgetController : ControllerBase
- {
- // GET api/values
- [EnableCors("AnotherPolicy")]
- [HttpGet]
- public ActionResult<IEnumerable<string>> Get()
- {
- return new string[] { "green widget", "red widget" };
- }
- // GET api/values/5
- [EnableCors] // Default policy.
- [HttpGet("{id}")]
- public ActionResult<string> Get(int id)
- {
- switch (id)
- {
- case 1:
- return "green widget";
- case 2:
- return "red widget";
- default:
- return NotFound();
- }
- }
- }
复制代码
- <code data-author-content="[Route("api/[controller]")]
- [ApiController]
- public class WidgetController : ControllerBase
- {
- // GET api/values
- [EnableCors("AnotherPolicy")]
- [HttpGet]
- public ActionResult<IEnumerable<string>> Get()
- {
- return new string[] { "green widget", "red widget" };
- }
- // GET api/values/5
- [EnableCors] // Default policy.
- [HttpGet("{id}")]
- public ActionResult<string> Get(int id)
- {
- switch (id)
- {
- case 1:
- return "green widget";
- case 2:
- return "red widget";
- default:
- return NotFound();
- }
- }
- }
- "></code>
复制代码以下代码创建 CORS 默认计谋和名为 "AnotherPolicy" 的计谋:
-
- public class StartupMultiPolicy
- {
- public StartupMultiPolicy(IConfiguration configuration)
- {
- Configuration = configuration;
- }
- public IConfiguration Configuration { get; }
- public void ConfigureServices(IServiceCollection services)
- {
- services.AddCors(options =>
- {
- options.AddDefaultPolicy(
- builder =>
- {
-
- builder.WithOrigins("http://example.com",
- "http://www.contoso.com");
- });
- options.AddPolicy("AnotherPolicy",
- builder =>
- {
- builder.WithOrigins("http://www.contoso.com")
- .AllowAnyHeader()
- .AllowAnyMethod();
- });
- });
- services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
- }
- public void Configure(IApplicationBuilder app, IHostingEnvironment env)
- {
- if (env.IsDevelopment())
- {
- app.UseDeveloperExceptionPage();
- }
- else
- {
- app.UseHsts();
- }
- app.UseHttpsRedirection();
- app.UseMvc();
- }
- }
复制代码
禁用 CORS
@No__t-1DisableCors @ no__t-2属性对控制器/页模子/操纵禁用 CORS。
CORS 计谋选项
本部分先容可在 CORS 计谋中设置的各种选项:
Startup.ConfigureServices 中调用 AddPolicy。 对于某些选项,最好先阅读CORS 怎样工作部分。
设置答应的泉源
AllowAnyOrigin – 答应全部泉源的 CORS 哀求和任何方案(http 或 https )。 AllowAnyOrigin 不安全,因为任何网站都可以向应用程序发出跨域哀求。
备注
指定 @no__t 0 和 @no__t 为不安全设置,大概导致跨站点哀求伪造。 使用这两种方法设置应用时,CORS 服务将返回无效的 CORS 响应。
AllowAnyOrigin 会影响预检哀求和 @no__t 标头。 有关详细信息,请参阅预检哀求部分。
SetIsOriginAllowedToAllowWildcardSubdomains – 将计谋的 @no__t 设置为在评估是否答应源时答应源与设置的通配符域匹配的函数。
- options.AddPolicy("AllowSubdomain",
- builder =>
- {
- builder.WithOrigins("https://*.example.com")
- .SetIsOriginAllowedToAllowWildcardSubdomains();
- });
复制代码
设置答应的 HTTP 方法
AllowAnyMethod:
- 答应任何 HTTP 方法:
- 影响预检哀求和 @no__t 0 标头。 有关详细信息,请参阅预检哀求部分。
若要答应在 CORS 哀求中发送特定标头(称为作者哀求标头),请调用 WithHeaders 并指定答应的标头:
- options.AddPolicy("AllowHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .WithHeaders(HeaderNames.ContentType, "x-custom-header");
- });
复制代码
- <code data-author-content="options.AddPolicy("AllowHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .WithHeaders(HeaderNames.ContentType, "x-custom-header");
- });
- "></code>
复制代码若要答应全部作者哀求标头,请调用 AllowAnyHeader:
- options.AddPolicy("AllowAllHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .AllowAnyHeader();
- });
复制代码
- <code data-author-content="options.AddPolicy("AllowAllHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .AllowAnyHeader();
- });
- "></code>
复制代码此设置会影响预检哀求和 @no__t 0 标头。 有关详细信息,请参阅预检哀求部分。
仅当在 Access-Control-Request-Headers 中发送的标头与 WithHeaders 中指定的标头完全匹配时,才可以使用 CORS 中间件计谋与 WithHeaders 指定的特定标头匹配。
比方,思量按如下方式设置的应用:
app.UseCors(policy => policy.WithHeaders(HeaderNames.CacheControl)); - <code data-author-content="app.UseCors(policy => policy.WithHeaders(HeaderNames.CacheControl));
- ">
- </code>
复制代码CORS 中间件使用以下哀求标头拒绝预检哀求,因为 WithHeaders 中未列出 Content-Language (HeaderNames): - <code data-author-content="Access-Control-Request-Headers: Cache-Control, Content-Language
- ">Access-Control-Request-Headers: Cache-Control, Content-Language
- </code>
复制代码应用返回200 OK响应,但不会向后发送 CORS 标头。 因此,欣赏器不会实行跨域哀求。
默认环境下,欣赏器不会向应用程序公开全部的响应标头。 有关详细信息,请参阅W3C 跨域资源共享(术语):简单的响应标头。
默认环境下可用的响应标头包罗:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
CORS 规范将这些标头称为简单的响应标头。 若要使其他标头可用于应用程序,请调用 WithExposedHeaders:
- options.AddPolicy("ExposeResponseHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .WithExposedHeaders("x-custom-header");
- });
复制代码
- <code data-author-content="options.AddPolicy("ExposeResponseHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .WithExposedHeaders("x-custom-header");
- });
- "></code>
复制代码跨域哀求中的根据
根据需要在 CORS 哀求中举行特别处理惩罚。 默认环境下,欣赏器不会使用跨域哀求发送根据。 根据包罗 cookie 和 HTTP 身份验证方案。 若要使用跨域哀求发送根据,客户端必须将 XMLHttpRequest.withCredentials 设置为 true 。
直接使用 @no__t:
- var xhr = new XMLHttpRequest();
- xhr.open('get', 'https://www.example.com/api/test');
- xhr.withCredentials = true;
复制代码
使用 jQuery:
- $.ajax({
- type: 'get',
- url: 'https://www.example.com/api/test',
- xhrFields: {
- withCredentials: true
- }
- });
复制代码
使用提取 API:
- fetch('https://www.example.com/api/test', {
- credentials: 'include'
- });
复制代码
服务器必须答应根据。 若要答应跨域根据,请调用 AllowCredentials:
- options.AddPolicy("AllowCredentials",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .AllowCredentials();
- });
复制代码
HTTP 响应包罗一个 @no__t 0 的标头,该标头关照欣赏器服务器答应跨源哀求的根据。
如果欣赏器发送根据,但响应不包罗有效的 @no__t 0 标头,则欣赏器不会向应用程序公开响应,而且跨源哀求会失败。
答应跨域根据会带来安全风险。 另一个域中的网站可以代表用户将登任命户的根据发送给该应用程序,而无需用户的知识。
CORS 规范还指出,如果 @no__t 标头存在,则将源设置为 "*" (全部源)是无效的。
预检哀求
对于某些 CORS 哀求,欣赏器会在发出实际哀求之前发送其他哀求。 此哀求称为预检哀求。 如果满意以下条件,欣赏器可以跳过预检哀求:
- 哀求方法为 GET、HEAD 或 POST。
- 应用未设置
Accept 、Accept-Language 、Content-Language 、Content-Type 或 @no__t 为的哀求标头。
- @No__t 的标头(如果已设置)具有以下值之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
为客户端哀求设置的哀求标头上的规则实用于应用通过调用 @no__t @no__t 对象上的的标头。 CORS 规范调用这些标头作者哀求标头。 规则不实用于欣赏器可以设置的标头,如 User-Agent 、Host 或 Content-Length 。
下面是预检哀求的示例: - <code data-author-content="OPTIONS https://myservice.azurewebsites.net/api/test HTTP/1.1
- Accept: */*
- Origin: https://myclient.azurewebsites.net
- Access-Control-Request-Method: PUT
- Access-Control-Request-Headers: accept, x-my-custom-header
- Accept-Encoding: gzip, deflate
- User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
- Host: myservice.azurewebsites.net
- Content-Length: 0
- ">OPTIONS https://myservice.azurewebsites.net/api/test HTTP/1.1
- Accept: */*
- Origin: https://myclient.azurewebsites.net
- Access-Control-Request-Method: PUT
- Access-Control-Request-Headers: accept, x-my-custom-header
- Accept-Encoding: gzip, deflate
- User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
- Host: myservice.azurewebsites.net
- Content-Length: 0</code>
复制代码预航班哀求使用 HTTP OPTIONS 方法。 它包罗两个特别标头:
Access-Control-Request-Method :将用于实际哀求的 HTTP 方法。
Access-Control-Request-Headers :应用在实际哀求上设置的哀求标头的列表。 如前文所述,这不包罗欣赏器设置的标头,如 User-Agent 。
CORS 预检哀求大概包罗一个 @no__t 0 标头,该标头向服务器指示与实际哀求一起发送的标头。
若要答应特定标头,请调用 WithHeaders:
- options.AddPolicy("AllowHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .WithHeaders(HeaderNames.ContentType, "x-custom-header");
- });
复制代码
若要答应全部作者哀求标头,请调用 AllowAnyHeader:
- options.AddPolicy("AllowAllHeaders",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .AllowAnyHeader();
- });
复制代码
欣赏器的设置方式并不完全划一 Access-Control-Request-Headers 。 如果将标头设置为 @no__t 0 (或使用 AllowAnyHeader)以外的任何内容,则至少应包罗 Accept 、Content-Type 和 @no__t,以及要支持的任何自界说标头。
下面是针对预检哀求的示例响应(假定服务器答应该哀求): - <code data-author-content="HTTP/1.1 200 OK
- Cache-Control: no-cache
- Pragma: no-cache
- Content-Length: 0
- Access-Control-Allow-Origin: https://myclient.azurewebsites.net
- Access-Control-Allow-Headers: x-my-custom-header
- Access-Control-Allow-Methods: PUT
- Date: Wed, 20 May 2015 06:33:22 GMT
- ">HTTP/1.1 200 OK
- Cache-Control: no-cache
- Pragma: no-cache
- Content-Length: 0
- Access-Control-Allow-Origin: https://myclient.azurewebsites.net
- Access-Control-Allow-Headers: x-my-custom-header
- Access-Control-Allow-Methods: PUT
- Date: Wed, 20 May 2015 06:33:22 GMT
- </code>
复制代码响应包罗一个 @no__t 0 标头,该标头列出了答应的方法,还可以选择一个 @no__t 标头,此中列出了答应的标头。 如果预检哀求乐成,则欣赏器发送实际哀求。
如果预检哀求被拒绝,应用将返回200 OK响应,但不会向后发送 CORS 标头。 因此,欣赏器不会实行跨域哀求。
设置预检逾期时间
@No__t 的标头指定可缓存对预检哀求的响应的时间长度。 若要设置此标头,请调用 SetPreflightMaxAge:
- options.AddPolicy("SetPreflightExpiration",
- builder =>
- {
- builder.WithOrigins("http://example.com")
- .SetPreflightMaxAge(TimeSpan.FromSeconds(2520));
- });
复制代码
CORS 怎样工作
本部分先容 HTTP 消息级别的CORS哀求中发生的环境。
- CORS不是一种安全功能。 CORS 是一种 W3C 标准,可让服务器放宽相同的源计谋。
- API 不能通过答应 CORS 来更安全。
- 它由客户端(欣赏器)来欺压实行 CORS。 服务器实行哀求并返反响应,这是返回错误并克制响应的客户端。 比方,以下任何工具都将体现服务器响应:
- 这是一种方法,使服务器可以大概答应欣赏器实行跨源XHR或获取 API哀求,否则将被克制。
- 欣赏器(不含 CORS)不能实行跨域哀求。 在 CORS 之前,使用JSONP来绕过此限定。 JSONP 不使用 XHR,它使用
标记吸取响应。 答应跨源加载脚本。
CORS 规范先容了几个新的 HTTP 标头,它们启用了跨域哀求。 如果欣赏器支持 CORS,则会自动为跨域哀求设置这些标头。 若要启用 CORS,无需自界说 JavaScript 代码。
下面是一个跨源哀求的示例。 @No__t 0 标头提供发出哀求的站点的域。 @No__t 的标头是必须的,而且必须与主机差别。 - <code data-author-content="GET https://myservice.azurewebsites.net/api/test HTTP/1.1
- Referer: https://myclient.azurewebsites.net/
- Accept: */*
- Accept-Language: en-US
- Origin: https://myclient.azurewebsites.net
- Accept-Encoding: gzip, deflate
- User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
- Host: myservice.azurewebsites.net
- ">GET https://myservice.azurewebsites.net/api/test HTTP/1.1
- Referer: https://myclient.azurewebsites.net/
- Accept: */*
- Accept-Language: en-US
- Origin: https://myclient.azurewebsites.net
- Accept-Encoding: gzip, deflate
- User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
- Host: myservice.azurewebsites.net
- </code>
复制代码如果服务器答应该哀求,则会在响应中设置 @no__t 的标头。 此标头的值可以与哀求中的 @no__t 0 标头匹配,也可以是通配符值 "*" ,表示答应任何源: - <code data-author-content="HTTP/1.1 200 OK
- Cache-Control: no-cache
- Pragma: no-cache
- Content-Type: text/plain; charset=utf-8
- Access-Control-Allow-Origin: https://myclient.azurewebsites.net
- Date: Wed, 20 May 2015 06:27:30 GMT
- Content-Length: 12
- Test message
- ">HTTP/1.1 200 OK
- Cache-Control: no-cache
- Pragma: no-cache
- Content-Type: text/plain; charset=utf-8
- Access-Control-Allow-Origin: https://myclient.azurewebsites.net
- Date: Wed, 20 May 2015 06:27:30 GMT
- Content-Length: 12
- Test message
- </code>
复制代码如果响应不包罗 @no__t 的标头,则跨域哀求会失败。 详细而言,欣赏器不答应该哀求。 纵然服务器返回乐成的响应,欣赏器也不会将响应提供给客户端应用程序。
测试 CORS
测试 CORS:
- 创建 API 项目。 大概,您也可以下载该示例。
- 使用本文档中的方法之一启用 CORS。 比方:
- public void Configure(IApplicationBuilder app, IHostingEnvironment env)
- {
- if (env.IsDevelopment())
- {
- app.UseDeveloperExceptionPage();
- }
- else
- {
- app.UseHsts();
- }
- // Shows UseCors with CorsPolicyBuilder.
- app.UseCors(builder =>
- {
- builder.WithOrigins("http://example.com",
- "http://www.contoso.com",
- "https://localhost:44375",
- "https://localhost:5001");
- });
- app.UseHttpsRedirection();
- app.UseMvc();
- }
复制代码
- <code data-author-content="public void Configure(IApplicationBuilder app, IHostingEnvironment env)
- {
- if (env.IsDevelopment())
- {
- app.UseDeveloperExceptionPage();
- }
- else
- {
- app.UseHsts();
- }
- // Shows UseCors with CorsPolicyBuilder.
- app.UseCors(builder =>
- {
- builder.WithOrigins("http://example.com",
- "http://www.contoso.com",
- "https://localhost:44375",
- "https://localhost:5001");
- });
- app.UseHttpsRedirection();
- app.UseMvc();
- }
- "></code>
复制代码
告诫
WithOrigins("https://localhost:"); 应仅用于测试雷同于下载示例代码的示例应用。
- 创建 web 应用项目(Razor Pages 或 MVC)。 该示例使用 Razor Pages。 可以在与 API 项目相同的办理方案中创建 web 应用。
- 将以下突出体现的代码添加到索引 cshtml文件中:
- @page
- @model IndexModel
- @{
- ViewData["Title"] = "Home page";
- }
- <div class="text-center">
- <h1 class="display-4">CORS Test</h1>
- </div>
- <div>
- <input type="button" value="Test"
- onclick="requestVal('https://<web app>.azurewebsites.net/api/values')" />
- 'result'>
- </div>
- <script>
- function requestVal(uri) {
- const resultSpan = document.getElementById('result');
- fetch(uri)
- .then(response => response.json())
- .then(data => resultSpan.innerText = data)
- .catch(error => resultSpan.innerText = 'See F12 Console for error');
- }
- </script>
复制代码
- <code data-author-content="@page
- @model IndexModel
- @{
- ViewData["Title"] = "Home page";
- }
- <div class="text-center">
- <h1 class="display-4">CORS Test</h1>
- </div>
- <div>
- <input type="button" value="Test"
- onclick="requestVal('https://<web app>.azurewebsites.net/api/values')" />
-
- </div>
- <script>
- function requestVal(uri) {
- const resultSpan = document.getElementById('result');
- fetch(uri)
- .then(response => response.json())
- .then(data => resultSpan.innerText = data)
- .catch(error => resultSpan.innerText = 'See F12 Console for error');
- }
- </script>
- "></code>
复制代码
-
在上面的代码中,将 url: 'https://.azurewebsites.net/api/values/1', 更换为已摆设应用的 URL。
-
摆设 API 项目。 比方,摆设到 Azure。
-
从桌面运行 Razor Pages 或 MVC 应用,然后单击 "测试" 按钮。 使用 F12 工具查察错误消息。
-
从 @no__t 中删除 localhost 源,并摆设应用。 大概,使用其他端口运行客户端应用。 比方,在 Visual Studio 中运行。
-
与客户端应用程序举行测试。 CORS 故障返回一个错误,但错误消息不能用于 JavaScript。 使用 F12 工具中的 "控制台" 选项卡查察错误。 根据欣赏器,你会收到雷同于以下内容的错误(在 F12 工具控制台中):
-
使用 Microsoft Edge:
SEC7120: [CORS] 源 https://localhost:44375 在 @no__t 上找不到跨源资源的访问控制答应源响应标头中的 https://localhost:44375
-
使用 Chrome:
对源 https://localhost:44375 https://webapi.azurewebsites.net/api/values/1 的 XMLHttpRequest 的访问已被 CORS 计谋克制:哀求的资源上没有 "访问控制-答应" 标头。
可以使用工具(如Fiddler或Postman)测试启用 CORS 的闭幕点。 使用工具时,@no__t 的标头指定的哀求源必须与吸取哀求的主机差别。 如果哀求不是基于 Origin 标头的值跨域的,则:
- 不需要 CORS 中间件来处理惩罚哀求。
- 不会在响应中返回 CORS 标头。
|