angular2 xhrfields withcredentials true答案

【问题标题】：angular2 xhrfields withcredentials trueangular2 xhrfields withcredentials true
【发布时间】：2020-05-30 13:58:29
【问题描述】：

我正在尝试登录系统。在角度 1 中，有一些方法可以设置

withCredentials:true

但我在 angular2 中找不到可行的解决方案

export class LoginComponent {
    constructor(public _router: Router, public http: Http, ) {

    }


    onSubmit(event,username,password) {
        this.creds = {'Email': 'harikrishna@gmail.com','Password': '01010','RememberMe': true}
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');

        this.http.post('http://xyz/api/Users/Login', {}, this.creds)
              .subscribe(res => {
                  console.log(res.json().results);

              });
     }

}

【问题讨论】：

标签： javascript angular http

【解决方案1】：

在 Angular > 2.0.0（实际上是从 RC2 开始），只是

http.get('http://my.domain.com/request', { withCredentials: true })

【讨论】：

我花了很长时间寻找这个...谢谢。
同样，我花了很多时间试图解决这个问题。我遇到的问题之一是我真的不知道问题是什么（或者至少需要一段时间才能找到它）。我所看到的只是一个看似完美的请求得到了 401 响应。

【解决方案2】：

AFAIK，目前（beta.1）该选项不可用。

您必须使用以下方法解决它：

let _build = http._backend._browserXHR.build;

http._backend._browserXHR.build = () => {
  let _xhr =  _build();
  _xhr.withCredentials = true;
  return _xhr;
};

【讨论】：

这适用于 chrome 和 firefox，但 safari 失败。有什么想法吗？
不是特别针对这个，但当前 beta (beta.7) 的 Safari（如国际化 API）仍然存在一些问题。
你能告诉我你用 api 发送什么标题吗这是我发送的标题 = { headers: new Headers({ 'Accept': 'application/json', 'Content-Type ': '应用程序/json' }) };
我做了一个 login.service.ts 来登录（离子 2），我应该把这段代码放在哪里才能让它工作？
这对我来说效果很好。谢谢！您是否使用它构建了单元测试？我在嘲笑这部分时遇到了麻烦。 stackoverflow.com/questions/37806956/…

【解决方案3】：

angular2 团队已注意到此问题。

您可以在issue link 之后找到一些其他解决方法（特别是写成@Injectable）。

【讨论】：

链接无效
它是有效的......嗯，它是链接的生命周期:(
我在某处读到这篇文章说，在答案上随机发布链接不是一个好主意，因为它们可能会随着时间的推移而消失。链接很好，但至少应该复制粘贴含义内容:)

【解决方案4】：

如果有人使用纯 JS，根据 cexbrayat 的回答：

app.Service = ng.core
    .Class({
        constructor: [ng.http.Http, function(Http) {
            this.http = Http;
            var _build = this.http._backend._browserXHR.build;
            this.http._backend._browserXHR.build = function() {
                var _xhr = _build();
                _xhr.withCredentials = true;
                return _xhr;
            };
        }],

【讨论】：

【解决方案5】：

我认为您没有以正确的方式使用 post 方法。你可以试试这样的：

onSubmit(event,username,password) {
  this.creds = {
    'Email': 'harikrishna@gmail.com',
    'Password': '01010','RememberMe': true
  }

  this.headers = new Headers();
  this.headers.append('Content-Type', 'application/json');

  this.http.post('http://xyz/api/Users/Login', 
                 JSON.stringify(this.creds),
                 { headers: headers });
}

你反转参数。第二个参数对应于发送到 POST 的内容，应该定义为字符串。此级别尚不支持对象。看到这个问题：https://github.com/angular/angular/issues/6538。

如果要设置具体的headers，需要在post方法的第三个参数中添加Headers对象。

否则，如果您想在跨域请求中发送 cookie，我认为 withCredentials 属性与 CORS 相关。您可以查看此链接了解更多详情：

希望对你有帮助蒂埃里

【讨论】：

【解决方案6】：

getHeaders(): RequestOptions {
    let optionsArgs: RequestOptionsArgs = { withCredentials: true }
    let options = new RequestOptions(optionsArgs)
    return options;
  }

getAPIData(apiName): Observable<any> {`enter code here`
    console.log(Constants.API_URL + apiName);
    let headers = this.getHeaders();
    return this.http
      .get(Constants.API_URL + apiName, headers)
      .map((res: Response) => res.json())
  }

在 webapi 中启用 cors

相同的代码在 chrome（普通）、Internet Explorer 中运行良好

但它在隐身chrome，firefox，edge中询问Windows登录提示。分享解决问题的建议

【讨论】：