Angular 9 и. NET Web Api - Как исправить проблему CORS с запросом http.post - PullRequest
Новая
       132

Angular 9 и. NET Web Api - Как исправить проблему CORS с запросом http.post

1 голос
/ 06 мая 2020

Я реализую приложение angular 9, которое должно взаимодействовать с. NET веб-API.

Веб-API публикуется в моем локальном IIS 10 на http://localhost: 8080 или http://localhost: 44348 для тестирования при отладке из Visual Studio.

Запрос http.get работает нормально, но когда я делаю запрос http.post, я получаю следующая ошибка: 

Access to XMLHttpRequest at 'http://localhost:8080/api/Login/Post_User' 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.

, но если я попытаюсь выполнить почтовый запрос с помощью Postman, он будет работать нормально.

Это код, который я использую go вызов веб-API из моего angular app: 

this.apiService.post(this.user);
.....

  public post(user){
    return this.httpClient.post<any>(this.api_post_url, user).subscribe(data => {});
  }

и вот мой метод веб-API: 

[HttpPost]
[ActionName("Post_User")]
public IHttpActionResult Post_User(User value)
   {
       // make insert in my database
       return Ok();
   }

... но следующий код «http.get» работает нормально, и я могу чтобы получить моего пользователя 

this.profileUserService.getByEmail(this.user.email).pipe(
            map((user: User) => {
              return user;
            })
          ).subscribe((data: User)=> {            
            if(data.name === undefined)
            {
                this.router.navigate(['/profile-user']);
            }else{
                this.router.navigate(['/profile-user']); //GO TO DASHBOARD
            }
          });        
    }

  .....

  public getByEmail(email: string){    
    this.url = `${this.api_get_url}` + email;
    return this.httpClient.get(this.url)
  }

Я также пытался реализовать прокси в моем приложении Angular, но с тем же результатом

proxy.conf. json: 

{
    "/api/*": {
        "target": "http://localhost:8080",
        "secure": false,
        "logLevel": "debug"
    }
}

пакет. json: 

...
"start": "ng serve --proxy-config proxy.conf.json",
...

и, наконец, angular. json

...
"proxyConfig": "src/proxy.conf.json"
...

всегда с тем же результатом enter image description here

Заранее благодарим за помощь.

1 Ответ

1 голос
/ 06 мая 2020

Вам необходимо включить CORS в вашем веб-API.

Если вы используете. NET framework, установите Microsoft.As pNet .WebApi.Cors из nuget.

Затем добавьте следующий код в вашем WebApiConfig.cs 

config.EnableCors();

Наконец, добавьте следующий атрибут к каждому желаемому методу 

[EnanleCors(origins: "*", headers: "*", methods: "*")]

Вы можете выбрать, какие источники могут выполнять запросы

Надеюсь это поможет.

...