角6 Asp.Net（不是Core）Web Api CORS请求失败

Question

我在建一个房子。Net Web Api，该Api将由Angular 6客户端使用，但由于任何原因，我无法使其在我的开发环境中工作。

我从一个非常简单的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;
            }));

在我的第一次尝试中，我所有的回答都失败了：

区js:2969选项http://localhost:9810/api/Login405（不允许使用方法）
登录：1无法加载http://localhost:9810/api/Login:对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。起源'http://localhost:4200因此，不允许访问。

因此，在调查之后，我将CORS支持添加到我的WebApi中。Net项目的下一种方式：

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） 作为Api控制器类标题中2）的替代：

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

但似乎没有工作，请求总是失败与上述相同的错误在浏览器控制台。

我尝试创建一个自托管WebApi，在上侦听http调用http://localhost:9000以及我上一次尝试在本地Windows 10 IIS服务器上使用9810端口发布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/Login
请求方法：选项
状态代码：405方法不允许
远程地址：[：1]：9000
推荐人策略：降级时无推荐人

响应标题：

允许：GET，POST
内容长度：76
内容类型：应用程序/json；charset=utf-8
日期：星期三，29八月2018 10:32:36格林尼治标准时间
服务器：Microsoft-HTTPAPI/2.0

请求标头：

接受：/
接受编码：gzip，deflate，br
接受语言：es，es；q=0.9
访问控制请求头：内容类型
访问控制请求方法：POST
连接：保持活动状态
主机：本地主机：9000
来源：http://localhost:4200
用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/68.0。3440.106狩猎/537.36

Answer 1

关于cors问题，我也面临类似的问题，我创建了一个global.asax文件，我放置了下面的代码

protected void Application_BeginRequest()
{

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        //These headers are handling the "pre-flight" OPTIONS call sent by the browser
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://staging.example.com:8044");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Accepts, Content-Type, Origin, X-My-Header");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "60");
        HttpContext.Current.Response.End();
    }

}

它在angular 6和ionic 3中都对我有效，在所有这些尝试安装之前https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

打开上面的chrome插件并激活它，然后尝试运行应用程序

Answer 2

在整个上午绞尽脑汁尝试了你们每个人在这里提出的所有建议后，我真不敢相信我的问题最终会如此轻松地得到解决。

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

@Steveland解决方案涉及添加依赖注入，这对我来说有点复杂（我对此没有太多经验），因为我没有使用Asp。Net Core但Asp.NET框架4.6.

我一直在寻找一个简单的解决方案来解决一个我认为应该很容易解决的问题，关键是要添加

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

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

我不知道这是否是实现这一目标的最佳方式，但现在它起作用了（让我知道你们的想法）。

我感谢大家给我的所有帮助，并表示感谢。由于我不是这方面的专家（Angular Web Api），我想最后问下一个问题：

当api将部署到服务器时，我是否必须将此[HttpOptions]也用于生产，或者这是目前调试和测试本地目的所需要的？

编辑1：

测试后，我注意到它与自托管Web Api一起工作，但当我将Web Api发布到本地IIS时，我在浏览器中得到“415不支持的媒体类型”：(