ASP.NET Core CORS WebAPI:no Access
我已将ASP.NET Core web API部署到Azure,并且可以使用Swagger或Web调试器(如Fiddler)访问其端点。 在这两种情况下(Swagger中的相同来源,使用我的计算机中的Fiddler的不同来源),当访问API时,我会得到预期的结果,并在我的Startup.cs
启用CORS,如下所示:
add services.AddCors();
ConfigureServices
。
添加中间件到Configure
:我知道这里的顺序很重要(ASP.NET 5:Access-Control-Allow-Origin的响应),所以我把这个调用放在方法的顶部,只有在记录或诊断之前中间件; 这是我的完整方法:
public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory,
IDatabaseInitializer databaseInitializer)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
loggerFactory.AddNLog();
// to serve up index.html
app.UseDefaultFiles();
app.UseStaticFiles();
// http://www.talkingdotnet.com/aspnet-core-diagnostics-middleware-error-handling/
app.UseDeveloperExceptionPage();
app.UseDatabaseErrorPage();
// CORS
// https://docs.asp.net/en/latest/security/cors.html
app.UseCors(builder =>
builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com")
.AllowAnyHeader()
.AllowAnyMethod());
app.UseOAuthValidation();
app.UseOpenIddict();
app.UseMvc();
databaseInitializer.Seed().GetAwaiter().GetResult();
env.ConfigureNLog("nlog.config");
// swagger
app.UseSwagger();
app.UseSwaggerUi();
}
localhost
CORS在开发过程中使用,并引用Angular2 CLI应用程序。 CORS在本地工作正常,并且我的客户端和API应用程序位于同一本地主机上的不同端口上,所以这是“真正的”交叉来源(我正在评论这是因为我在这里找到的建议:https://weblog.west -wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas:该帖子的作者注意到,响应中的CORS头只在实际需要时发送,即在真正的跨源环境中)。
使用Fiddler我可以成功访问远程API,但我没有Access-Control-Allow-Origin
标头。 因此,从浏览器(通过我的客户端应用程序)调用API时,即使服务器返回200,AJAX请求也会失败。示例Fiddler请求(成功):
GET http://mywebapisiteurl/api/values HTTP/1.1
User-Agent: Fiddler
响应:
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=prinapi.azurewebsites.net
Date: Thu, 01 Dec 2016 10:30:19 GMT
["value1","value2"]
当尝试访问部署在Azure上的远程API时,我的客户端应用程序始终以错误的方式失败其AJAX请求:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.myclientserver.com' is therefore not allowed access.
以下是使用Angular2(使用Plunker)的示例客户端代码:
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { Http, Headers, Response } from '@angular/http';
import { HttpModule } from '@angular/http';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button (click)="test()">test</button>
</div>
`,
})
export class App {
name:string;
constructor(private _http: Http) {
this.name = 'Angular2'
}
public test() {
this._http.get('http://theapisiteurlhere/api/values',
{
headers: new Headers({
'Content-Type': 'application/json'
})
})
.subscribe(
(data: any) => {
console.log(data);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
总之,似乎ASPNET API服务器没有返回预期的CORS头,因此我的基于浏览器的客户端托管在不同的源上失败。 然而,CORS的设置似乎没有问题,至少从上面引用的文件来看, 我处于真正的跨源性环境中; 我将中间件放在其他人面前。 也许我错过了一些明显的东西,但围绕这些都是我找到的所有建议。 任何提示?
UPDATE
回复@Daniel JG:来自fiddler的请求/响应成功:
GET http://theapiserver/api/values HTTP/1.1
User-Agent: Fiddler
Host: theapiserver
Origin: http://theappserver/apps/prin
和:
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://theappserver/apps/prin
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver
Date: Thu, 01 Dec 2016 14:15:21 GMT
Content-Length: 19
["value1","value2"]
据报道,Angular2(Plunker)的请求/响应失败。 通过检查网络流量,我只能看到预检请求:
OPTIONS http://theapiserver/api/values HTTP/1.1
Host: theapiserver
Proxy-Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://run.plnkr.co
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://run.plnkr.co/h17wYofXGFuTy2Oh/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,it;q=0.6
HTTP/1.1 204 No Content
Server: Microsoft-IIS/8.0
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver
Date: Thu, 01 Dec 2016 14:23:02 GMT
在此之后,请求失败,并且没有更多流量进入服务器。 报告的问题是, Response to preflight request doesn't pass access control check
,同样是因为缺少响应中的标题:
XMLHttpRequest cannot load http://theapiserver/api/values. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
添加.AllowAnyOrigin()方法可以解决您的问题
app.UseCors(builder =>
builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com")
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod());
WebApi Project --->右键单击引用--->管理Nuget包中的搜索核心部分。 通过安装将Microsoft.AspNet.WebApi.Cors添加到项目中
将以下代码添加到项目中App_Start文件夹下的WebApi.Config文件中。
var cors = new EnableCorsAttribute(“”,“”,“*”); config.EnableCors(CORS);
在这里输入图像描述
在这里输入图像描述
以下是我自己的问题的答案,从意见中复制而来:我没有注意到,在Azure门户中有一个CORS部分。 如果我没有在那里输入任何允许的来源,我的基于代码的配置似乎是完全不相关的。 这对我来说看起来很奇怪,因为我被迫在这里复制URL,但是一旦我将*
添加到允许的起源处,它就可以工作。