Как исправить «Доступ к XMLHttpRequest в« http://localhost:51255/token' из источника »http://localhost:4200' был заблокирован политикой CORS

Question

Я пытаюсь установить связь между проектом dotnet webapi и проектом angular6.

Сценарий: когда я ввожу имя пользователя и пароль и нажимаю кнопку входа, он должен получить access_token, имя пользователя с сервера и отобразить результат в displayresult.html.,Я знаю, что этот вопрос задавался ранее, но даже после попытки использовать все эти решения, я не смог связать свой проект angular6 с dotnetwebapi.

Чтобы исправить политику CORS, я внес некоторые изменения в свой проект dotnetwebapi.

1. Добавлено app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); в ConfigureAuth(IAppBuilder app) из startup.auth.cs.

2. В web.config, добавлены пользовательские заголовки, см. Код ниже.

authservice.ts

export class AuthService
{
private TokenAPI="http://localhost:51255/token";
    login(username:string,password:string):Observable<TokenParams>
    {
        var headersfortokenapi = new Headers({'Content-Type':'application/x-www-form-encoded'});
        var data="grant_type=password&username=" + username + "&password=" + password;

        return this.objhttp.post(this.TokenAPI,data,{ headers:headersfortokenapi})
        .pipe(
            map(res=>res.json()
             )
            );      
    }
}

Login.component.ts

 OnLoginClick()  
{   
this.objauthservice.login(this.username,this.password)
.subscribe
(
 data=>
  {
    this.tokenparam=data;
   this.objauthservice.AccessToken=this.tokenparam.access_token;
    this.objroute.navigate(['/Displayproducts']);
  }
) 
 }

Когда я нажимаю кнопку входа на странице входа, он выходитк вышеуказанному методу, и он вызывает метод авторизации authserviceТеперь я создал проект TOKENWEBAPIPROJECT dotnet.Этот проект выполняется в http://localhost:51255/token.Фрагмент кода, в котором я внес некоторые изменения в TOKENWEBAPIPROJECT.

startup.cs

 public void ConfigureAuth(IAppBuilder app)
        {
//it has the default code for connecting to dbcontext and application
 app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
}

web.config

<system.webServer>
    <httpProtocol>
      <customHeaders>
     <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
 <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS,token"/>
 <add name="Access-Control-Allow-Headers" value="Origin, application/x-www-form-encoded, Content-Type, X-Auth-Token" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Я протестировал запрос на публикацию http://localhost:51255/token в Почтальоне.Здесь я отправляю имя пользователя, пароль, grant_type = пароль, и он возвращает мне правильный access_token, имя пользователя, token_type и т. Д.

Ожидается: когда я ввожу имя пользователя и пароль и нажимаю кнопку входа, он должен получить access_token, имя пользователя с сервера иотобразить результат в displayresult.html.

Actual: Вместо этого я получаю следующие ошибки: - 1. OPTIONS http://localhost:51255/token 400 (Bad Request)

Access to XMLHttpRequest at 'http://localhost:51255/token' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Answer 1

Номер порта должен совпадать в ответе Access-Control-Allow-Origin и в запросе Origin.

Ссылка:

Веб-приложения, которые не определяются уникальным узлом конкретного хоста.имена и / или сопоставленные с определенными портами не обязательно имеют уникальное происхождение и, таким образом, не смогут безопасно использовать механизм, определенный в этой спецификации.Это связано с тем, что источник состоит только из схемы, имени хоста и порта .

https://www.w3.org/TR/cors/

Также см. Ответы по управлению предварительным запросом.:

CORS - Как выполнить предварительную проверку httprequest?

Вы должны отправить код состояния 200 в ответ на запрос предварительной проверки OPTIONS.