c# - Angular 6 Asp.Net（非核心）Web Api CORS 请求失败

问题描述

我正在构建一个 .Net Web 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;
            }));

在我的第一次尝试中，我的所有响应都以响应失败：

zone.js:2969 OPTIONS http://localhost:9810/api/Login 405 (Method Not Allowed)
login:1 Failed to load http://localhost:9810/api/Login : 对预检请求的响应未通过访问控制检查：请求的资源上不存在“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。

如果我像这样“ http://localhost/api/Login ”访问浏览器中的 url，那么字符串会像这样返回：

<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
请求方法：OPTIONS
状态代码：405 方法不允许
远程地址：[::1]:9000
推荐人策略：no-referrer-when-downgrade

响应标头：

允许：GET,POST
内容长度：76
内容类型：应用程序/json；charset=utf-8
日期：2018 年 8 月 29 日星期三 10:32:36 GMT
服务器：Microsoft-HTTPAPI/2.0

请求标头：

Accept: /
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, like Gecko) Chrome/68.0.3440.106 Safari/537.36

标签： c#angularasp.net-web-api

在整个早上挣扎我的头并尝试了你们每个人在这里提出的所有建议之后，我无法相信我的问题最终可以这么容易地解决。

关于@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”:(

c# - Angular 6 Asp.Net（非核心）Web Api CORS 请求失败

问题描述

解决方案

推荐阅读