Angular HTTP get 中的 Corrs 问题答案

【问题标题】：Corrs issue in Angular HTTP getAngular HTTP get 中的 Corrs 问题
【发布时间】：2019-01-08 16:52:11
【问题描述】：

我正在尝试如下调用 api：

let headers = new Headers();
headers.append('Authorization', `bearer `+this.getTokenFromStorage());
headers.append('Content-Type', 'application/json; charset=utf-8');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET');
let options = new RequestOptions({ headers: headers });
return this.http.get(Appconfig.HISURL + 'api/User/GetUserDetails/' + soeid, options);

如下所示的错误

err = HttpErrorResponse {标头：HttpHeaders，状态：401， statusText：“未经授权”，网址： “http://localhost:54721/api/User/GetUserDetails/MA12345”，好的：假的， …}

但是我把这些值传递给 POSTMAN，它没有任何问题地访问 API，我缺少什么？

【问题讨论】：

为什么不使用拦截器来添加标题？如果您使用的是 httpClient。
使用拦截器需要做哪些改变
medium.com/@ryanchenkie_40935/… 看看这个。
没有这个还有其他选择吗？
感谢您的提示..我得到了解决方案！

标签： angular typescript asp.net-web-api get cross-domain

【解决方案1】：

你试过看proxy conf吗？

用类似的东西创建一个文件proxy.conf.json：

 {
  "/api": {
    "target": "http://localhost:54721",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }

然后您只需要在没有任何 CORS 标头的情况下进行 API 调用。

不要忘记将--proxy-config proxy.conf.json 添加到您的启动脚本中。

【讨论】：

我应该在哪里添加这个？在上面的脚本中？
在文件中调用proxy.conf.json
完全希望这是一个变通而不是解决方案，因为我们使用代理......我对吗？
这仅适用于开发环境。在生产环境中，后端应该与您的 Angular 应用程序位于相同的 url 和端口上。如果你想对外部 API 进行一些 API 调用，你应该在这个 API 中添加 CORS 授权，而不是在你的 Angular 应用程序中。但出于安全原因，不建议允许跨域请求。

【解决方案2】：

问题是您使用的是新的HttpClient（从您获得HttpErrorResponse 的事实推断），但是您传入了错误的标头实例：您使用的是Headers（角度2-4）而不是HttpHeaders（角度4-6）

试试看

import {HttpHeaders} from '@angular/common.http;

//...

let headers = new HttpHeaders().set('Authorization', `bearer `+this.getTokenFromStorage());

return this.http.get(Appconfig.HISURL + 'api/User/GetUserDetails/' + soeid, {headers});

同样在客户端传递Access-Control-... 标头是没有用的，因为它们应该设置在服务器端

【讨论】：

非常感谢！它就像一个魅力！你是明星！！

【解决方案3】：

试试这个，

let url = 'API_URL';
let options = new RequestOptions({ headers: this.getHeadersWithAuthToken() });
return this.http.get(url,options).map(response => response.json());

getHeadersWithAuthToken(): Headers {
    return new Headers(
      {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Methods': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Origin': '*',
        'Authorization': `bearer `+localStorage.getItem("token")
      });
  }

【讨论】：

如果您使用“HttpClient”来访问 http 方法，那么它会给出同样的错误。尝试使用“private http:Http”并通过它访问http方法。