无法 post 我的表单从 angular 6 app 到 asp.net web api

Question

我正在尝试 post 从我的 angular 6 应用程序到我的网站 api 的一些表单数据。但是，我总是收到错误消息 'OPTIONS http://localhost:52994/api/Mail/SendMail 405 (Method Not Allowed)' and 'Access to XMLHttpRequest at 'http://localhost:52994/api/Mail/SendMail' 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.'为了清楚起见，我正在编写所有必要的代码，但如果不清楚，请随时询问更多。

angular方法：

sendMail(mail:Mail) {
      console.log(mail); // prints desired data
      this.http.post('http://localhost:52994/api/Mail/SendMail',mail)
      .subscribe(
        data => { console.log ("POST was successful",data)},
        error => { console.log("Error",error)}
      );
   }

其中邮件模型如下：

export class Mail {
Name: string;
Email: string;
Message: string;
To: string;
From: string;
}

这是目标网站 api 方法：

[HttpPost]
public HttpResponseMessage SendMail([FromBody]MailModel mail)
{
     try
        {
            using (MailMessage mm = new MailMessage(mail.From, mail.To))
            {
                mm.Subject = "ContactUs";
                string body = "You've got a message as below :";
                body += "<br /><br />Name : " + mail.Name;
                body += "<br /><br />Email : " + mail.Email;
                body += "<br /><br />Message : " + mail.Message;
                mm.Body = body;
                mm.IsBodyHtml = true;
                ....
                smtp.Send(mm);
                return Request.CreateResponse(HttpStatusCode.OK, mail);
            }
        }
        catch(Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }

型号class:

   public class MailModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Message { get; set; }
    public string To { get; set; }
    public string From { get; set; }
}

我已经在 web.config 文件中设置了所有必需的 headers，如下所示：

 <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTION" />
  </customHeaders>
</httpProtocol>

Answer 1

尝试将 OPTION 更改为 OPTIONS 以允许 preflight requests. These requests use HTTP OPTIONS method 和 "S"。

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
  </customHeaders>
</httpProtocol>

希望对您有所帮助！

Answer 2

通过如下所示安装 Cors 并启用 Cors 来实现此目的：

  // Enable CORS for the Angular App
  var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
  config.EnableCors(cors);

无法 post 我的表单从 angular 6 app 到 asp.net web api

not able to post my form from angular 6 app to asp.net web api

asp.net-web-api

angular

angular-httpclient

angular6