Как настроить запрос OPTIONS в CORS для Access-Control-Allow-Origin с ASP.NET Web API - PullRequest
Новая
       30

Как настроить запрос OPTIONS в CORS для Access-Control-Allow-Origin с ASP.NET Web API

0 голосов
/ 26 мая 2018

У меня возникла проблема при попытке получить токен с моего сервера в проекте Angular 5.Мой запрос POST никогда не отправляется, и сервер возвращает 400 Bad Request и отображает в консоли следующее:

Console Screenshot

Headers Screenshot

Response Screenshot

Насколько я понимаю, мне нужно настроить запрос OPTIONS в CORS, чтобы разрешить запрос перекрестного происхождения, но я чувствуюкак будто я пробовал каждое решение, которое есть там, без какого-либо успеха.

Насколько я пробовал до сих пор, в моем Web.config у меня есть это:

Web.config Screenshot

И я включил CORS глобально в моем WebApiConfig.cs:

WebApiConfig.cs Screenshot

Я даже реализовал решение, предложенное вhttps://www.stevefenton.co.uk/2012/11/using-cors-with-asp-net-web-api/

Вот вызов, который я выполняю в своем проекте Angular 5: 

userAuthentication(userDetails: LoginUser): Observable<LoginUser> {
var data = "username=" + userDetails.username + "&password=" + userDetails.password + "&grant_type=password";
var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded', 'No-Auth': 'True' });
return this.http.post<LoginUser>(this._baseUrl + 'Token', data, { headers: reqHeader })
  .pipe(
    catchError(this.handleError)
  )
}

Когда я выполняю вызов с помощью POSTMAN, все идет гладко, и я получаю access_token.

1 Ответ

0 голосов
/ 28 мая 2018

Мне удалось решить эту проблему.Мне нужно было добавить Microsoft.Owin.Cors с Microsoft.AspNet.Cors и Microsoft.AspNet.WebApi.Cors.

Затем мне пришлось добавить app.UseCors(CorsOptions.AllowAll); в мой Startup.cs файл:

enter image description here

… и удалить customHeaders измежду тегами system.webserver в Web.config:

enter image description here

Теперь все работает гладко.

Примечание. Важно отметитьчто при включении CORS на вашем WebApiConfig.cs, если вы выполнили предыдущие шаги, которые я показал, вы должны включить его следующим образом:

enter image description here

…и не так:

enter image description here

Если вы это сделаете, вы получите сообщение об ошибке, в котором указывается, что ваш заголовок содержит несколько значений и, следовательно, будет запрещен ваш Origin доступ.

...