c# - Angular 6 Asp.Net(非核心)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 OPTIONS http://localhost:9810/api/Login 405 (Method Not Allowed)
login:1 Failed to load http://localhost:9810/api/Login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

所以我在调查之后通过以下方式将 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 Controller 类 header 中替代 2):

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

但似乎都不起作用，请求总是失败，并出现与上述浏览器控制台中相同的错误。

我尝试在 http://localhost:9000 上创建一个自托管 WebApi 监听 http 调用以及我最后一次尝试在我的本地 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 网络选项卡信息。

一般:

Request URL: http://localhost:9000/api/Login
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: [::1]:9000
Referrer Policy: no-referrer-when-downgrade

响应头:

Allow: GET,POST
Content-Length: 76
Content-Type: application/json; charset=utf-8
Date: Wed, 29 Aug 2018 10:32:36 GMT
Server: Microsoft-HTTPAPI/2.0

请求 header :

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
Host: localhost:9000
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Answer 1

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

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

@Steveland 解决方案涉及添加依赖项注入(inject)，这对我来说有点复杂(我没有太多经验)，除了我没有使用 Asp.Net Core 而是 Asp.Net 框架 4.6。

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

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

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

我不知道这是否是实现此目标的最佳方法，但目前它有效(让我知道你们的想法，伙计们)。

我很感激我在这里收到的每个人的帮助并表示感谢，因为我不是这个主题的专家(Angular + Web Api)我最后想问下一个问题:

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

编辑 1:

测试后我注意到它适用于自托管 Web Api，但是当我将 Web Api 发布到我的本地 IIS 时，我在浏览器中收到“415 Unsupported Media Type”:(