Включить CORS в Angular 6 и ASP.net

Question

Я пытаюсь отправить запрос POST из моего приложения Angular 6 в API, который отправляет электронные письма.

Я протестировал запрос с почтальоном, и он работал, однако, когда я выполняю запрос POST в моемПриложение Angular Я получаю ошибки в своей консоли.

Моя функция в приложении Angular:

sendMail(formBody: string): any {
    //let url = this.config.origin + "/api/SendEmail";
    let url = "http://localhost:49561/api/SendEmail";
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');

    return this.httpClient.post(url, formBody, { headers })
      .pipe(map(res => {
        return res;
      })).toPromise();
  }

В API добавлено следующее:

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Enable Cors
            config.EnableCors();
            ...

    [EnableCors(origins: "http://localhost:4200/contact", headers: "*", methods: "*")]
    public class ContactFormsController : ApiController
    {
       ...

Это предупреждения и ошибки, которые я получаю в консоли:

"Запрос перекрестного источника заблокирован: политика одинакового происхождения запрещает чтение удаленного ресурса в http://localhost:49561/api/SendEmail. (причина: Отсутствует заголовок CORS «Access-Control-Allow-Origin». "

" Запрос перекрестного источника заблокирован: одна и та же политика происхождения запрещает чтение удаленного ресурса на http://localhost:49561/api/SendEmail. (причина: запрос CORSне удалось). "

" Ошибка ОШИБКИ: "Uncaught (в обещании): HttpErrorResponse: {" headers ": {" normalizedNames ": {}," lazyUpdate ": null," headers ": {}}, «status»: 0, «statusText»: «Неизвестная ошибка», «url»: null, «ok»: false, «name»: «HttpErrorResponse», "message": "Http error response (неизвестный URL): 0 неизвестная ошибка", "error": {"isTrusted": true}} ""

РЕДАКТИРОВАТЬ: я добавил следующеев Web.config:

         <httpProtocol>
                <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                </customHeaders>
         </httpProtocol>

, и теперь я получаю эту ошибку вместо "пропущенного Access-Control-Allow-Origin":

Cross-Origin RequestЗаблокировано: та же политика происхождения запрещает чтение удаленного ресурса на http://localhost:49561/api/SendEmail. (причина: предварительный канал CORS не выполнен)

РЕДАКТИРОВАТЬ:

После удаления "содержимого-Тип: приложение / JSON ".Я получил эту ошибку в консоли:

Ошибка: «Uncaught (в обещании): HttpErrorResponse: {« headers »: {« normalizedNames »: {},« lazyUpdate »: null},»status ": 500," statusText ":" Internal Server Error "," url ":" http://localhost:49561/api/SendEmail","ok":false,"name":"HttpErrorResponse","message":"Http ответ об ошибке для http://localhost:49561/api/SendEmail: 500 Internal Server Error "," error ": {" Message ":«Произошла ошибка.», «ExceptionMessage»: «Указанный источник политики 'http://localhost:4200/contact' недопустим.Он не должен содержать путь, запрос или фрагмент. "," ExceptionType ":" System.InvalidOperationException "," StackTrace ":" в System.Web.Http.Cors.EnableCorsAttribute.ValidateOrigins (происхождение IList`1) \ r \n в System.Web.Http.Cors.EnableCorsAttribute.GetCorsPolicyAsync (запрос HttpRequestMessage, CancellationToken cancellationToken) \ r \ n в System.Web.Http.Cors.CorsMessageHandler.d__8.MoveNext (End) \ n \ nтрассировка от предыдущего местоположения, где было сгенерировано исключение --- \ r \ n в System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (задача задачи) \ r \ n в System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (задача задачи) \ rn в System.Web.Http.Cors.CorsMessageHandler.d__5.MoveNext () \ r \ n --- Конец трассировки стека из предыдущего расположения, где было сгенерировано исключение --- \ r \ n в System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess (Задача задачи) \ r \ n в System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (Задача задачи) \ r \ n в System.Web.Http.Cors.CorsMessageHandler.d__4.MoveNext () "}}"

Answer 1

Использовать атрибут (не использовать подстановочный знак для Access-Control-Allow-Methods пока не поддерживается всеми браузерами.)

[EnablCors(origins: "*", headers: "*", methods: "GET, POST, PUT, DELETE, OPTIONS")]

In Global

И вы должны обрабатывать метод «OPTIONS» отдельно в global.asax, так как браузер отправит предварительный запрос на сервер

protected void Application_BeginRequest()
{
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

Answer 2

Перейдите в папку App_start и откройте WebApiConfig.cs

Добавить следующую строку:

 EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "GET, POST, PUT, DELETE, OPTIONS");
 config.EnableCors(cors);

окончательный код:

public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();
            EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "GET, POST, PUT, DELETE, OPTIONS");
            config.EnableCors(cors);
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        }

Вы можете заменить * с локального хоста: 4200 в начале