预检响应具有无效的 HTTP 状态代码 404 - Angular 4 和 Web API 2答案

【问题标题】：Response for preflight has invalid HTTP status code 404 - Angular 4 and Web API 2预检响应具有无效的 HTTP 状态代码 404 - Angular 4 和 Web API 2
【发布时间】：2017-10-29 08:28:41
【问题描述】：

在服务中，我调用 Web API(2)（托管在与前端 Angular 4 应用程序不同的服务器上）操作方法以检索一些信息。

操作方法需要授权，我正在使用登录应用程序后收到的访问令牌进行授权。现在，代码在 Microsoft Edge 中运行良好，但是在 chrome 中给了我预检错误，我猜这是 CORS 问题。不知道如何解决这个问题。有人可以帮我解决这个问题吗？

这是我的代码；

 getCompanyInfo(id: string) {
  let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'Authorization': 'Bearer ' + this.commonService.accessToken
    });
  let options = new RequestOptions({ headers: headers });
  let getRequestUrl = this.commonService.baseUrl + 'api/getCompanyInfo';

    return this.http.get(getRequestUrl + '/' + id, options)
      .map((res: any) => <CompanyInfoModel>res.json())
      .do(response => console.log(response))
      .catch(this.commonService.handleError);
  }

请注意，这很好用；

如果我不使用对 Web API 的授权访问并从标头中删除令牌。
在 Microsoft Edge 中，标头中有或没有访问令牌。

【问题讨论】：

我假设this.http.get 会在必要时自行处理 OPTIONS 请求？您是否检查过 Chrome 开发工具是否确实发生了这种情况？
@CBroe 感谢您的回复，我收到了 chrome 开发工具 - 无法加载 localhost:80/api/getCompanyInfo/1：预检响应包含无效的 HTTP 状态代码 404
您在网络面板中看到实际的预检请求（OPTIONS 方法）吗？
您是否也可以访问此请求的另一端，即请求的服务器端？如果是这样，请检查那里的访问和错误日志。这可能是找出问题所在的更快方法。
@CBroe 是的，我确实可以访问服务器端。我可以在提琴手和网络面板中看到相同的 404 错误。

标签： angular asp.net-web-api2

【解决方案1】：

除了以下之外，没有什么对我有用；我必须导入 Microsoft.Owin.Cors 并在 Web API 的 Startup.Auth.cs 的 ConfigureAuth 方法顶部添加这行代码。

 app.UseCors(CorsOptions.AllowAll);

请注意：- 从 Web.config 和 WebApiConfig.cs 中删除所有启用 CORS 的设置。否则它会抱怨重复实现。

快乐编码:-)

【讨论】：

我收到请求的资源上没有“Access-Control-Allow-Origin”标头。即使在添加了上面的行之后。如果我在配置文件中添加额外的设置来启用核心它说重复。
@bomaboom 确保您的控制器中没有任何与核心相关的属性。
我在控制器中没有任何与核心相关的属性。顺便说一句，当我调用 owin 管道以获取令牌时出现此错误。
你能发布你的前端调用吗？
oAuthpostHttpMethod(relativePath: string, inputObject): Observable { let body: string = this.encodeParams(inputObject); return this.http.post(this.oAuthurl + relativePath, body, {headers: new HttpHeaders( {'Content-Type': 'application/x-www-form-urlencoded'} )} ); }