[英]How to get CORS to work with ASP.Net Core Web API server Angular 2 client
我已经阅读了有关ASP.NET Core和CORS的所有文章,并且相信我能理解其中的大部分内容,但是,如果我能够将其投入使用,我将感到非常遗憾。 我正在使用Chrome浏览器,以下是数据:
Prefilght:
General:
Request URL:http://localhost:34376/api/login
Request Method:OPTIONS
Status Code:204 No Content
Remote Address:[::1]:34376
Response Headers:
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:access-control-allow-origin,content-type
Access-Control-Allow-Origin:http://localhost:3000
Date:Wed, 23 Nov 2016 03:05:00 GMT
Server:Kestrel
Vary:Origin
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcbXZjXFNob3BVc1NlcnZpY2Vcc3JjXFNob3BVc1NlcnZpY2VcYXBpXGxvZ2lu?=
Request Headers:
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:34376
Origin:http://localhost:3000
Referer:http://localhost:3000/authentication
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
帖子:
Request URL:http://localhost:34376/api/login
Request Method:POST
Status Code:500 Internal Server Error
Remote Address:[::1]:34376
Response Headers:
view source
Content-Length:0
Date:Tue, 22 Nov 2016 03:11:40 GMT
Server:Kestrel
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcbXZjXFNob3BVc1NlcnZpY2Vcc3JjXFNob3BVc1NlcnZpY2VcYXBpXGxvZ2lu?=
Request Headers:
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Access-Control-Allow-Origin:true
Connection:keep-alive
Content-Length:87
Content-Type:application/json
Host:localhost:34376
Origin:http://localhost:3000
Referer:http://localhost:3000/authentication
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
Request Payload:
view source
{userName: "", email: "irv@testing.com", password: "!P@ssw0rd", rememberMe: false}
email: "irv@testing.com"
password: "!P@ssw0rd"
rememberMe: false
userName:""
ASP.NET Core代码:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options => {
options.AddPolicy("CorsPolicy",
builder => builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials().Build() );
});
// Add framework services.
services.AddApplicationInsightsTelemetry(Configuration);
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
app.UseCors("CorsPolicy");
app.UseApplicationInsightsRequestTelemetry();
app.UseApplicationInsightsExceptionTelemetry();
app.UseMvc();
}
ASP.NET Core控制器:
[EnableCors("CorsPolicy")]
[Produces("application/json")]
[Route("api/Authentication")]
public class AuthenticationController : Controller
{
private IUnitOfWork _unitOfWork;
public AuthenticationController(IUnitOfWork unitOfWork)
{
_unitOfWork = unitOfWork;
}
[HttpPost]
[Route("/api/login")]
public JsonResult Login([FromBody]LoginInfo loginInfo)
{
return Json(new { id_token = _unitOfWork.Users.CreateJwt(loginInfo) });
}
这是Angular代码:
@Injectable()
export class AuthenticationService {
private _currentAdminMode: boolean = false;
constructor(private _http: Http, private _config: ConfigurationService) {
}
public login(logInfo: LoginInfo): Observable<TokenContainer> {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
//return an observable
return this._http.post(this._config.hostPrefix + '/api/login', JSON.stringify(logInfo), { headers: headers })
.map((response) => {
return <TokenContainer>(response.json());
});
}
我在浏览器控制台中遇到的确切错误是:
XMLHttpRequest cannot load http://localhost:34376/api/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.
请注意,我从POST请求中收到500错误。 如果出现CORS问题,这似乎不是服务器将发送的错误。 我认为这是另外一回事,但是,所有这些代码都在单个域中工作,因为现在CORS成为了麻烦。 无论如何,我已经阅读了所有可以找到的内容,但没有任何效果。 我认为这可能与WebAPI路由有关。
谢谢你提供的所有帮助!
好吧,我花了一天的时间来弄清楚如何处理几乎相同的问题。 我将尝试描述更多信息:
我使用netcoreapp1.0,基于IIS的WebAPI的RESTful服务。 前端:angular2。
在我的Startup.cs中:
// this is not much important, you can organize builder in Configure method, calling app.UseCors()
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowSpecificOrigin",
builder => builder.WithOrigins("http://localhost:37885")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
services.AddMvc();
services.Configure<MvcOptions>(options =>
{
options.Filters.Add(new CorsAuthorizationFilterFactory("AllowSpecificOrigin"));
});
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseCors("AllowSpecificOrigin");
app.UseMvc();
}
当我在Visual Studio中运行该代码时,它可以完美运行。 但是,一旦我在IIS上发布了WebAPI项目,我就遇到麻烦了:预检请求返回状态为“代码:204 No Content” ,而POST和PUT请求返回了“ 405 Method Not Allowed” :
当应用程序托管在IIS上时, AllowAnyMethod()似乎没有任何作用,因为如上图所示,仅允许GET,HEAD,OPTIONS,TRACE 。
为了测试该东西并消除对angular和Web API的怀疑,我创建了测试脚本并在Chrome开发者控制台中运行了它:
var xmlHttp = new XMLHttpRequest(); //returns a XMLHttpRequest object
xmlHttp.open('PUT', "http://localhost:27895/api/usergroups/58c624eb54d98519e85c5771", true);
xmlHttp.setRequestHeader('Content-Type', "application/json");
xmlHttp.send(JSON.stringify({"id":"58c624eb54d98519e85c5771","Name":"Группа первооткрывателей"}));
从我的角度客户端页面运行此脚本时,我遇到了同样的问题。 比我从托管WebApi的同一来源运行此脚本(以检查没有COR的webAPI)。 我遇到一个错误,告诉我现场不允许使用PUT方法!
最后,我找到了解决方案: 问题出在IIS上的WebDAV模块中,与我的RESTful服务冲突 。 我从IIS上的webAPI网站中删除了WEBDAV模块,现在可以正常使用了:
去做这个:
还要从IIS上的处理程序映射中为您的webApi站点删除WebDAV选项。
如果您想进一步了解WEBDAV和Web API冲突,这些主题可能会很有用:
事实证明,WebDav处理程序和模块在下一次发布后再次出现在IIS中。 因此,为防止站点执行此操作,请修改WebAPI应用程序的web.config,如下所示:
<handlers>
<remove name="WebDAV" />
</handlers>
<modules>
<remove name="WebDAVModule" />
</modules>
这个话题帮助我弄清楚了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.