Я пытаюсь установить связь между проектом dotnet webapi и проектом angular6.
Сценарий: когда я ввожу имя пользователя и пароль и нажимаю кнопку входа, он должен получить access_token, имя пользователя с сервера и отобразить результат в displayresult.html.,Я знаю, что этот вопрос задавался ранее, но даже после попытки использовать все эти решения, я не смог связать свой проект angular6 с dotnetwebapi.
Чтобы исправить политику CORS, я внес некоторые изменения в свой проект dotnetwebapi.
Добавлено app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
в ConfigureAuth(IAppBuilder app)
из startup.auth.cs
.
В 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.