Angular 6 Asp.Net(非Core)Web Api CORS请求失败

Question

我正在构建一个将由Angular 6客户端使用的.Net Web Api,但由于任何原因,我无法使其在我的开发环境中工作.

我从一个非常简单的Web Api开始,它只是返回一个字符串(在前端和后端测试目的之间进行通信):

// GET: api/Login
public IEnumerable<string> Get()
{
    return new string[] { "Now it works!" };
}

// POST: api/Login
public void Post([FromBody]string value)
{
    string strTest = "I'm doing just nothing";
}

然后在我的Angular 6应用程序中,我有一个带有以下帖子请求的方法:

return this.http.post<any>(`http://localhost:9810/api/Login`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }

                return user;
            }));

在我的第一次尝试中,我的所有回复都没有响应:

zone.js:2969选项http:// localhost:9810/api /登录 405(方法不允许)
登录:1无法加载http:// localhost:9810/api /登录:对预检请求的响应未通过访问控制检查:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 '访问.

所以我在调查之后,我已经为我的WebApi .Net项目添加了CORS支持:

1)已安装的Nuget包:

Microsoft.AspNet.WebApi.Cors
Microsoft.AspNet.Cors

2)在WebApiConfig注册方法中:

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
// or var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

3)替代2)在Api控制器类头中:

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

但似乎没有一个工作,请求总是失败,出现与浏览器控制台中描述的相同的错误.

我尝试在http:// localhost:9000上创建一个自托管WebApi监听http调用,以及我在9810端口的本地Windows 10 IIS服务器上发布WebApi的最后一次尝试.

如果我在浏览器中访问URL如" http:// localhost/api/Login "那么返回字符串,如下所示:

<ArrayOfstring xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
    <string>Now it works!</string>
</ArrayOfstring>

并且在控制台中没有显示错误,但只要我尝试通过Angular(默认端口4200)发出请求,请求就会因CORS错误而失败.

我被卡住了.如果我不能使它从Angular工作,我将无法进行调试和测试.

谢谢.

编辑1:添加了Chrome网络标签信息.

一般:

请求URL:http:// localhost:9000/api /登录
请求方法:选项
状态代码:405方法不允许
远程地址:[:: 1]:9000
引用者策略:no-referrer-when-downgrade

响应标题:

允许:GET,POST
Content-Length:76
Content-Type:application/json; charset = utf-
8日期
:2018年8月29日星期三10:32:36 GMT 服务器:Microsoft-HTTPAPI/2.0

请求标题:

接受:/
Accept-Encoding:gzip,deflate,br
Accept-Language:es-ES,es; q = 0.9
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
主机:localhost:9000
原产地:http:// localhost:4200
用户代理:Mozilla/5.0(Windows NT 10.0; Win64; x64)AppleWebKit/537.36(KHTML,类似Gecko)Chrome/68.0.3440.106 Safari/537.36

Answer 1

整个上午都在努力奋斗并且尝试了每个人在这里提出的建议之后，我不敢相信我的问题最终会如此轻松地解决。

关于@Madpop建议Application_BeginRequest（出于任何原因）从未被解雇（不想花太多时间调查原因）。

@Steveland解决方案涉及添加依赖项注入，除了我没有使用Asp.Net Core而是使用Asp.Net framework 4.6之外，这使我有点复杂（我对此没有太多经验）。

我正在寻找一个简单的问题解决方案，我认为它应该很容易解决，关键是附加

[HttpPost]
[HttpOptions] //this was the key
[Authorize]

张贴方法标题。这是我在请求中允许“选项”动词的唯一方法。

我不知道这是否是实现此目标的最佳方法，但目前它仍然有效（请让我知道您的想法）。

感谢在此收到的每个人的帮助，并表示感谢。由于我不是该主题的专家（Angular + Web Api），所以我想最后问下一个问题：

当将api部署到服务器时，是否还需要将此[HttpOptions]用于生产？或者现在只需要使用它来进行本地调试和测试？

编辑1：

经过测试后，我注意到它可以与自托管Web Api一起使用，但是当我将Web Api发布到本地IIS时，浏览器中显示“ 415 Unsupported Media Type”：